HTML5视频循环src更改结束播放功能无法正常工作

Question

我在同一个HTML5视频播放器中逐个播放了许多视频

HTML

<video id="homevideo" width="100%" autoplay autobuffer>
    <source src="app/video1.mp4" type='video/mp4' />
</video>

JS

video_count = 1;
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
    video_count++;
    if (video_count == 4) video_count = 1;
    var nextVideo = "app/video" + video_count + ".mp4";
    videoPlayer.src = nextVideo;
    videoPlayer.play();
}, false); 

如果我在播放之前发出警报,它就会起作用.但没有警报就没有了.初始化第二个视频播放:

videoPlayer.src = nextVideo;
alert("a");
videoPlayer.play();

Answer 1

html5视频元素有一个自己的eventtype,你不需要自己的eventlistener.

HTML:

<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="app/video1.mp4" type='video/mp4'/>
</video>

和

脚本:

video_count =1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == 4) video_count = 1;
        var nextVideo = "app/video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };

PS:请记住,仅为您的视频提供一种格式是不够的,因为所有主流浏览器都不支持单一格式.

编辑:

链接
来源:w3schools

在媒体活动
由像视频,图像和音频媒体(适用于所有的HTML元素,但最常见于媒体元素,如触发的事件<audio>,<embed>,<img>,<object>,和<video>):

onended:当媒体到达终点时运行的脚本(对于"感谢收听"等消息的有用事件)