更新

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

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

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

您可以查看实时示例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();
        }
    });
});

更新

在fullpage.js＆gt;中不再需要这样做。 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。更多信息at the documentation。

Answer 2

尝试autoplay="autoplay"

http://www.w3schools.com/tags/att_video_autoplay.asp

在“HTML和XHTML之间的差异”部分中提及。

Answer 3

抱歉，我还没有足够的代表来发表评论。你试过了：

autoplay="autoplay"

Answer 4

您可以使用＆＃34; isInViewport＆＃34; 插件（下面链接）找出当前在视口中的视频，并相应地执行一些js代码。

$(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {
            $('video').each(function () {
                if ($(this).is(":in-viewport")) {
                    $(this)[0].play();
                }
            }
    });
});

请记住，遍历每个视频元素并不是最有效的方法，但这应该足以让您入门。

jQuery plugin: isInViewport

Answer 5

或者您可以使用autoplay属性，例如

<video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
//----use just this one---^

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

5 个答案:

更新