在视频期间暂停 Javascript 循环答案

【问题标题】：Pause Javascript Loop During Video在视频期间暂停 Javascript 循环
【发布时间】：2012-06-04 22:35:33
【问题描述】：

给定 HTML5 视频，是否可以创建一个 for 或 while 循环，在其中的视频结束之前不会继续？例如，下面的代码应该顺序播放三个视频，而不是同时播放。

<video id="video0">
    <source src="video0.mp4">
</video>
<video id="video1">
    <source src="video1.mp4">
</video>
<video id="video2">
    <source src="video2.mp4">
</video>

var i=0;
while (i<3) {
    document.getElementById('video'+i).play();
    i++;
}

【问题讨论】：

您是否可以控制视频播放器，或者它是嵌入在您的网站中的其他网站的视频播放器？
我没有使用播放器，就其本身而言，只是标准的 html5 视频标签。所以我想我可以完全控制它。

标签： javascript for-loop while-loop html5-video

【解决方案1】：

这里的循环不能满足你的需求，你最好监听事件。

与媒体元素相关的所有事件的列表可以在W3C Page找到

因此，在您的具体情况下，这样的事情应该可以帮助您：

var playVideo = function(videoID){
    var video = document.getElementById('video'+videoID);

    if(video){    

        video.play();
        //binding the eventHandler for the event firing at the end of the video
        video.onended = function(e){
            playVideo(videoID++);
        }

        /* 
        Another way of binding the event-listener:
        video.addEventListener('ended',function(){
            playVideo(videoID++);
        });
        */
    }
}

playVideo(0);

【讨论】：