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

});

同时删除视频标记中的源元素。

检查并回答是否有效：）

HTML5：在阵列的视频标签中依次播放视频？

1 个答案: