HTML5视频循环src对端播放功能的更改不起作用

HTML5 video loop src change on end play function not working

本文关键字:功能 不起作用 播放 视频 循环 src HTML5      更新时间:2023-09-26

我有很多视频在同一个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();

html5视频元素有自己的事件类型,您不需要自己的事件监听器。

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

附言:请记住,只为视频提供一种格式是不够的,因为所有主要浏览器都不支持单一格式。

编辑:

链接
来源:w3schools

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

合一的:当媒体到达末尾时要运行的脚本(对于"感谢收听"之类的消息来说是一个有用的事件)