HTML5：配列の動画タグで動画を再生しますか？

Question

私はいくつかの動画をHTML5ビデオタグで順番に再生しようとしています。

私はいくつかの同様の質問に出くわし、それらの質問に対する回答に基づいて自分のコードを書こうとしました。

しかし、私はそれが最初のビデオをループし続けるアレイとから最初のビデオを再生することができます！

だから、これは私のコードです：

私はこのような配列にビデオを保存：

videoSource = ["vidoe1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"] 

私はそうのようなクリックイベントで動画を起動しよう：

videoSource = ["vidoe1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"] 

$(document).on('click','.playBtn', function(e){ 

var videoCount = videoSource.length; 
var video_index  = 0; 
var video_player = null; 

function onload(){ 
      videosToPlay = document.getElementById("videosToPlay"); 
      video_player = document.getElementById("idle_video"); 
      video_player.setAttribute("src", videoSource[video_index]); 
      videosToPlay.play(); 
     } 

function onVideoEnded(){  
      if(video_index < videoSource.length - 1){ 
       video_index++; 
      } 
      else{ 
       video_index = 0; 
      } 
      video_player.setAttribute("src", videoSource[video_index]); 
      videosToPlay.play(); 
     } 


onload(); 

$("#videosToPlay").bind("ended", function() { 
    //alert('Video ended!'); 
    onVideoEnded(); 
}); 



}); 

これは私のビデオタグです：

<video id="videosToPlay" width="100%" preload="none" controls playsinline> 

<source id="idle_video" src="" type="video/mp4"> 

</video> 

誰かがこの問題についてアドバイスをお願いできますか？

ありがとうございます。

Answer 1

これは動作するはずです：

videoSource = ["video1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"]; 

$('.playBtn').click(function(e){ 

var videoCount = videoSource.length; 
var video_index  = 0; 

function onload(){ 
      videosToPlay = document.getElementById("videosToPlay"); 
      videosToPlay.addEventListener('ended',onVideoEnded,false); 
      videosToPlay.src=videoSource[video_index]; 
      videosToPlay.play(); 
     } 

function onVideoEnded(){  
      video_index++; 
      if (video_index > videoCount-1) video_index = 0; 
      videosToPlay.src=videoSource[video_index]; 
      videosToPlay.play(); 
     } 


onload(); 

}); 

はまた、videoタグでソース要素を削除します。

はそれをチェックし、それが:)