javascript - ビデオ中にJavascriptループを一時停止します

Question

HTML5ビデオを考えると、その中のビデオが終了するまで継続しないforループまたはwhileループを作成することは可能ですか？たとえば、以下のコードは、同時にではなく、3つのビデオを順番に再生する必要があります。

<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++;
}

Answer 1

ループはここでのニーズを満たしません。イベントをリッスンすることをお勧めします。

Media-Elementsに関連するすべてのイベントのリストは、W3Cページにあります。

したがって、特定のケースでは、次のようなものが役立ちます。

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);