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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17521012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 08:38:11  来源:igfitidea点击:

HTML5 video loop src change on end play function not working

javascripthtmlhtml5-video

提问by Dhamu

I have a number of videos playing one by one in the same HTML5 video player

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

HTML

HTML

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

JS

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

If I put an alert before playing, it's working. But without the alert it's not. Initialize the second video play:

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

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

回答by Frank

The html5 video element has an own eventtype onended, you dont need your own eventlistener.

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

Html:

网址:

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

and

Script:

脚本:

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: Keep in mind that providing only one format for your video is not enough since no single format is supported by all major browsers yet.

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

EDIT:

编辑:

LINK
Source: w3schools

链接
来源:w3schools

At Media Events
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>):

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

onended: Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")

onended:当媒体到达结尾时运行的脚本(对于诸如“感谢收听”之类的消息的有用事件)