HTML5视频自动播放功能无法在fullpage.js中运行 [英] HTML5 video autoplay function not working in fullpage.js

问题描述

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

my HTML5 video autoplay is not working.

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

我也尝试过没有=true的值，它也不起作用。我已经在其他网站上使用了相同的代码，它工作正常。

I also tried without the ="true" value, and it doesn't work either. I've already used the same code in other sites and it worked just fine.

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

I'm using a framework based on fullPage.js, but i looked for something related on the files and didn't find anything.

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

The site is at http://agenciamilk.com/site/2/ if you wanna take a look. Thanks

推荐答案

你应该使用 afterRender 回调fullpage.js插件优惠。

You should use the afterRender callback the fullpage.js plugin offers.

afterRender（）

在生成页面结构后立即触发此回调。这是你想要用来初始化其他插件或者激活任何需要文档就绪的代码的回调（因为这个插件会修改DOM以创建结果结构）。

afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

您可以查看实时示例此处或者您甚至可以在整页的示例文件夹中找到它。 js download。

You can take a look at a live example here or you can even find it in the examples folder of the fullpage.js download.

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

And you can easily see the source code its using:

$(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>

如果您只想在部分加载（不是页面加载）上播放它，请使用数据自动播放。
更多信息文档。

In case you only want to play it on section load (not on page load) use data-autoplay. More info at the documentation.

这篇关于HTML5视频自动播放功能无法在fullpage.js中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！