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

});

還要刪除視頻標簽中的源元素。

檢查它並回答是否可行:)