HTML5 ビデオ プレイリスト用のクライアント側ソリューションを構築しようとしています。このプロジェクトでは AJAX または XML を使用できず、いくつかの問題が発生しています。
基本的に、1 つのビデオにビデオ タグをロードしてから、すべてのビデオを含む「プレイリスト」と呼ばれる順序付けられていないリストを作成します。Mov または Ogv のいずれかをプレイリストとして 1 つのページから再生できるように動作していますが、リスト内でフォールバックを動作させることはできません。私は少し立ち往生しています.ブラウザのスニッフィングは古い慣行であると読みましたが、解決策を思い付くことができません. どんな助けでも大歓迎です！
これまでの私のコードは次のとおりです-
**HTML**
<!-- /playlist -->
<div class="span2">
<ul id="playlist">
<li class="active">
<a href="disc_content/video/retro_photography_effects/film_burn.mov"/><img src="images/video/image1.jpg" style="margin-bottom:21px;"></a>
<a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"><img src="images/video/image1.jpg" style="margin-bottom:21px;"></a>
</li>
<li>
<a href="disc_content/video/retro_photography_effects/holga.mov" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a>
<a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"></a>
</li>
<li>
<a href="disc_content/video/retro_photography_effects/holga.mov" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a>
<a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"></a>
</li>
<li>
<a href="disc_content/video/retro_photography_effects/holga.mov" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a>
<a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"></a>
</li>
</ul>
</div>
<!-- /playlist -->
<!-- /video -->
<div class="span9">
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" />
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
<a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie"> <img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" /></a>
<p> Your video tag is not supported</p>
</video>
</div>
<!-- /video -->
**Javascript**
<!-- Video Playlist START -->
var video;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
video = $('#video');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
video[0].volume = .60;
video[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, video[0]);
});
video[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),video[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
<!-- Video Playlist END -->