Javascript HTML5：在阵列的视频标签中一个接一个地播放视频？

我一直在尝试用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();
});



});

videoSource=[“videoe1.mp4”、“video3.mp4”、“video44.mp4”、“video55.mp4”、“video9.mp4”]
$（文档）.on（'单击'，'.playBtn'，函数（e）{
var videoCount=videoSource.length；
var-video_指数=0；
var video_player=null；
函数onload（）{
videosToPlay=document.getElementById（“videosToPlay”）；
video\u player=document.getElementById（“空闲视频”）；
video_player.setAttribute（“src”，videoSource[video_index]）；
视频停止播放；
}
函数onVideoEnded（）{
if（视频索引

这是我的视频标签：

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

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

</video>

有人能就这个问题提出建议吗

提前谢谢

这应该有效：

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_index>videoCount-1）{video_index=0}或者{videosToPlay.src=videoSource[video_index]；videosToPlay.play（）；}