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

});

还要删除视频标签中的源元素。

检查它并回答是否可行:)