HTML5视频自动播放功能无法在fullpage.js中运行

Question

我的HTML5视频自动播放无效.

<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">

我也试过没有="true"值,它也不起作用.我已经在其他网站上使用了相同的代码,它运行得很好.

我正在使用基于fullPage.js的框架,但我找了一些与文件相关的东西并没有找到任何东西.

该网站位于http://agenciamilk.com/site/2/,如果你想看看.谢谢

Answer 1

你应该使用afterRenderfullpage.js插件提供的回调.

afterRender()
在生成页面结构后立即触发此回调.这是您要用于初始化其他插件或触发任何需要文档准备好的代码的回调(因为此插件修改DOM以创建结果结构).

你可以在这里看一个实例,你甚至可以在fullpage.js下载的examples文件夹中找到它.

您可以轻松查看其使用的源代码:

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

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

UPDATE

在fullpage.js> 2.6.6中不再需要这样做.只要有标签autoplay,它就会在访问该部分时自动播放视频:

<video autoplay loop muted controls="false" id="myVideo">
    <source src="imgs/flowers.mp4" type="video/mp4">
    <source src="imgs/flowers.webm" type="video/webm">
</video>

如果您只想在部分加载(而不是页面加载)上使用它data-autoplay.有关该文档的更多信息.