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个视频播放，控制台日志“此处1”就会触发但是我无法知道视频播放后如何停止视频一次。

任何帮助都会很棒。

Answer 1

添加

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

之前

console.log('here 1');

带有javascript循环的HTML5视频

1 个答案: