带有 javascript 循环的 HTML5 视频

Question

在尝试解决这个问题时运气不佳。

我有一个视频标签，里面有这样的视频：

    <video id="video" preload="auto" tabindex="0" controls poster="img/layout/Untitled-1.jpg">
        <source type="video/mp4" src="video/1.mp4" >
        Sorry, your browser does not support HTML5 audio.
    </video>
    <ul id="playlist">
        <li class="active"><a href="video/1.mp4">GetFighted</a></li>
        <li><a href="video/2.mp4">ThatGirlPossessed</a></li>
        <li><a href="video/3.mp4">WhiteDevil</a></li>
    </ul>

并使用 javascript 和 jquery 尝试遍历列表项（此列表可能更长或更短，它将由用户控制）并将它们放入视频本身，这适用于：

jQuery(document).ready(function($) {
    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;
        video[0].volume = .50;
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, video[0]);
        });

        video[0].addEventListener('ended',function(e){
            $('#video').animate({opacity: 0}, 500);
            setTimeout(function(){
                current++;
                if(current == len){
                    current = 0;
                    link = playlist.find('a')[0];
                    console.log('here 1');  
                } else  {
                    link = playlist.find('a')[current];
                    console.log('here');    
                }

                $('#video').animate({opacity: 1}, 500);
                run($(link),video[0]);
            },500);
        });
    }

    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            video[0].load();
            video[0].play();
    }


});

（此代码取自另一个来源作为参考，我忘记了在哪里）。但是，我遇到的麻烦是在视频循环播放完所有 3 个视频后停止播放。一旦播放完所有 3 个视频，控制台日志“here 1”就会触发，但我不知道如何在播放完视频后停止视频一次。

任何帮助都会很棒。

Answer 1

只需添加

video[0].addEventListener('loadstart', function(e){
  video[0].pause();
});

在你之前

console.log('here 1');