【问题标题】：HTML5 video autoplay function not working in fullpage.jsHTML5 视频自动播放功能在 fullpage.js 中不起作用
【发布时间】：2014-10-15 07:45:06
【问题描述】：

我的 HTML5 视频自动播放不起作用。

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

我也尝试不使用 ="true" 值，但它也不起作用。我已经在其他网站上使用过相同的代码，而且效果很好。

我正在使用基于 fullPage.js 的框架，但我在文件中查找了相关的内容，但没有找到任何内容。

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

【问题讨论】：

autoplay="autoplay" 而不是“真”。
我尝试了autoplay="autoplay" 和autoplay，但仍然无法正常工作...

标签： javascript html html5-video fullpage.js

【解决方案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 > 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.

【讨论】：

谢谢，部分工作。问题是，我正在用 3 个不同的“幻灯片”构建一个页面，每个“幻灯片”都有不同的视频背景。所以现在，只有第一个视频是自动播放的。我是否必须在 afterRender 回调上更改某些内容以允许多个视频？
那么你也应该使用afterSlideLoad 回调来播放加载幻灯片的视频。
实际上我的意思是部分，而不是幻灯片......无论如何，我检查了 github 上的回调页面，现在我尝试这样的事情：$(document).ready(function () { $('#fullpage').fullpage({ verticalCentered: true, anchors: ['Page1', 'Page2', 'Page3', 'Page4'], sectionsColor: ['#000000', '#1eacd7', '#e0382d', '#1eacd7'], afterRender: function () { //playing the video $('video').get(0).play(); }, afterLoad: function(Page2,2){ if(index == '2'){ $('video').get(0).play(); } } }); });
最后一条评论乱七八糟，有一些错误。我正在尝试，但仍然无法正常工作：$(document).ready(function () { $('#fullpage').fullpage({ afterRender: function () { //playing the video $('video').get(0).play(); }, afterLoad: function(anchorLink, index){ //using index if(index == '2'){ $('video').get(0).play(); } //using anchorLink if(anchorLink == 'Page2'){ $('video').get(0).play(); } } });
对不起@Alvaro，我对此很陌生，我似乎无法按照我的意愿制作小提琴...我只需要一个示例，说明如何将多个自动播放视频放在不同的页面中使用 fullpage.js

【解决方案2】：

试试autoplay="autoplay"

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

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

【讨论】：

【解决方案3】：

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

autoplay="autoplay"

?

【讨论】：

【解决方案4】：

您可以使用 "isInViewport" 插件（链接如下）找出当前在视口中的视频并相应地执行一些 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

【讨论】：

【解决方案5】：

或者你可以只使用autoplay 属性，比如

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

【讨论】：