Question

我的网站有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'和各种变化而没有运气。：（

有人建议吗？

干杯

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

Answer 2

破解了！

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

使用结束功能时，HTML5视频无法自动播放

2 个答案: