使用结束功能时 HTML5 视频不会自动播放答案

【问题标题】：HTML5 Video not auto playing when using ended function使用结束功能时 HTML5 视频不会自动播放
【发布时间】：2014-07-27 17:30:43
【问题描述】：

我的网站有一个 HTML5 视频背景。一旦通过它播放然后定向到锚链接。

这很好用，我唯一的问题是一旦我实现了指向锚定链接的功能，视频就会停止自动播放！？

网站基于FullPage.js

这是我的视频功能的代码：

$(document).ready(function() {
        $('#fullpage').fullpage({
            verticalCentered: true,
            sectionsColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
            menu: '#menu',


            afterRender: function(){


                //playing the video

                $("#myVideo").play().on("ended", function load() {
                    window.location.hash="secondPage"
                });
            }
        });
    });

这是视频中加载的代码。

<video autoplay controls id="myVideo">
        <source src="intro.mp4" type="video/mp4">
    </video>

我尝试使用 autoplay='autoplay' 和各种变体，但没有成功。 :(

有什么建议吗？

干杯

【问题讨论】：

破解了！ document.getElementById("myVideo").play(); $("#myVideo").on("end", function load() { window.location.hash="secondPage"跨度>

标签： jquery html function video fullpage.js

【解决方案1】：

您应该查看 fullpage.js 网站中带有背景视频的可用示例： http://alvarotrigo.com/fullPage/examples/videoBackground.html

    $(document).ready(function() {
        $('#fullpage').fullpage({
            verticalCentered: true,
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            afterRender: function(){


                //playing the video
                $('video').get(0).play();
            }
        });
    });

【讨论】：

【解决方案2】：

破解了！

    document.getElementById("myVideo").play(); 
$("#myVideo").on("ended", function load() { window.location.hash="secondPage"

【讨论】：

这不能保证视频在所有情况下都能播放......您应该在afterRender 回调中添加播放事件，正如我在回答中所说的那样。此外，您的第二行与视频无关，只是一种破解 URL 哈希的方法。