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

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

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

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

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

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

解决方法

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

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).

您可以查看实时示例here,或者甚至可以在fullpage.js下载的the examples folder中找到它.

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

$(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.
只要在其中包含标签自动播放,它将在访问该部分时自动播放视频：

<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.
更多信息at the documentation.

原文地址：https://www.jb51.cc/js/153159.html