使用Javascript的HTML5视频播放器

Question

我正在尝试为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 --> 

Answer 1

**HTML** 
<!-- /playlist --> 

<div class="span2"> 
<ul id="playlist"> 
    <li class="active"> 
     <a href="disc_content/video/retro_photography_effects/film_burn.mov" rel="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" rel="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
    </li> 

    <li> 
     <a href="disc_content/video/retro_photography_effects/holga.mov" rel="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
    </li> 

    <li> 
     <a href="disc_content/video/retro_photography_effects/holga2.mov" rel="http://www.advancedphotoshop.co.uk/discs/102/ogvs/holga.ogv" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></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 
function run(link, player){ 
    $(player).children().eq(0).attr("src",link.attr('href')); 
    $(player).children().eq(1).attr("src",link.attr('rel')); 
    par = link.parent(); 
    par.addClass('active').siblings().removeClass('active'); 
    video[0].load(); 
    video[0].play(); 
} 

我已经改变了你的HTML一点点，然后我已经改变了“的run（）”功能，以取代在源代码。