结束播放功能上的 HTML5 视频循环 src 更改不起作用

Posted 2023-05-07

【中文标题】结束播放功能上的 HTML5 视频循环 src 更改不起作用

【英文标题】：HTML5 video loop src change on end play function not working

【发布时间】：2013-07-05 10:52:49

【问题描述】：

我有多个视频在同一个 html5 视频播放器中一一播放

HTML

<video id="homevideo"  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();

【参考方案1】：

html5视频元素有自己的eventtype onended，你不需要自己的eventlistener。

HTML：

<video id="homevideo"  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：请记住，仅为您的视频提供一种格式是不够的，因为目前所有主流浏览器都不支持单一格式。

编辑：

LINK 来源：w3schools

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

结束： 媒体结束时运行的脚本（对于“感谢收听”等消息的有用事件）

【讨论】：

HTML5 视频中是否有“onended”自己的事件类型的参考链接？

.addEventListener("ended",... 正在工作...但是对于下一个视频播放它不会触发....如果我提醒它会正确触发播放

我的代码甚至你自己的代码在这里都可以正常工作。确保您的脚本位于 <video> 元素之后，这是我能想到的唯一原因，为什么它不适合您。