Пауза Javascript Loop во время видео

Question

Учитывая видео 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++; 
} 

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