javascript - 使用 Javascript 的 HTML5 视频播放器

Question

我正在尝试为 HTML5 视频播放列表构建客户端解决方案，但我无法为此项目使用 AJAX 或 XML，这导致了一些问题。

基本上我在一个视频中加载了一个视频标签，然后是一个名为“播放列表”的无序列表，其中包含我的所有视频。我让它工作，以便它可以在一页之外作为播放列表播放 Mov's 或 Ogv's，但我无法在列表中进行回退。我有点卡住了，我读到浏览器嗅探是一种老习惯，但无法提出解决方案。任何帮助将不胜感激!

到目前为止，这是我的代码 -

**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()”函数以替换两个源标记。