HTML5视频自动播放功能不工作在fullpage.js

HTML5 video autoplay function not working in fullpage.js

本文关键字：fullpage js 工作 视频 自动播放 功能 HTML5      更新时间：2023-09-26

我的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 ()
这个回调将在页面结构生成之后触发。这是你想要用来初始化其他插件或触发任何需要文档准备好的代码的回调(因为这个插件修改DOM来创建结果结构)。

你可以在这里看看一个活生生的例子，或者你甚至可以在fullpage.js下载的examples文件夹中找到它。

你可以很容易地看到它的源代码使用:

$(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。更多信息见文档

试试autoplay="autoplay"

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

在"HTML和XHTML的区别"一节中提到。

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

autoplay="autoplay"

?

你可以使用"isInViewport"插件(链接如下)来查找当前在viewport中的视频并相应地执行一些js代码。

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

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

jQuery插件:isInViewport

或者直接使用autoplay属性，比如

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