【问题标题】:HTML5 video loop src change on end play function not working结束播放功能上的 HTML5 视频循环 src 更改不起作用
【发布时间】:2013-07-05 10:52:49
【问题描述】:

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

【问题讨论】:

    标签: javascript html html5-video


    【解决方案1】:

    html5视频元素有自己的eventtype onended,你不需要自己的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:请记住,仅为您的视频提供一种格式是不够的,因为目前所有主流浏览器都不支持单一格式。

    编辑:

    LINK
    来源:w3schools

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

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

    【讨论】:

    • HTML5 视频中是否有“onended”自己的事件类型的参考链接?
    • .addEventListener("ended",... 正在工作...但是对于下一个视频播放它不会触发....如果我提醒它会正确触发播放
    • 我的代码甚至你自己的代码在这里都可以正常工作。确保您的脚本位于 &lt;video&gt; 元素之后,这是我能想到的唯一原因,为什么它不适合您。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-12-26
    • 2014-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-08
    相关资源
    最近更新 更多