【发布时间】：2012-10-08 16:27:28
【问题描述】：
我正在尝试为 HTML5 视频播放列表构建客户端解决方案，我无法在该项目中使用 AJAX 或 XML，这给我带来了一些问题。
基本上，我在一个视频中加载了一个视频标签，然后是一个名为“播放列表”的无序列表，其中包含我的所有视频。我让它工作，以便它可以在一页之外播放 Mov 或 Ogv 作为播放列表，但我无法在列表中获得后备工作。我有点卡住了，我读过浏览器嗅探是旧的做法，但无法提出解决方案。任何帮助将不胜感激！
这是我目前的代码 -
**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 -->
【问题讨论】：
-
试试videojs.com 或sublimevideo.net 易于添加和使用。我更喜欢videojs。
-
感谢您的建议，我希望使用 video.js 作为我的后备平台。但我正在构建自己的控件、加载栏等，所以我希望我可以让这个 Javascript 后备代码工作并自己操作所有 HTML5 功能。
标签： javascript html video playlist