FullPage JS 中的多个视频自动播放不起作用

Question

我已经在 github 和 github 上看到很多关于在 FullPage.js

中启用视频自动播放的答案（由 Alvaro 很好地解决）

但是，当我有多个视频时遇到问题，每个视频都在不同的幻灯片上，默认情况下需要自动播放。到目前为止，使用这段代码我只能自动启动第一个视频：

afterRender: function () {
        //playing the video
        $('video').get(0).play();
    }

据我了解，此功能需要与 afterSlideLoad 结合使用才能实现，但没有成功。有没有人有过在不同 slides/pages 上自动播放多个视频的经验？

Answer 1

如果您有多个视频，则需要循环播放它们。假设您在页面中使用 jQuery，这应该可以解决问题：

afterRender: function () {
    $('video').each(function () {
        //playing the video
        $(this).get(0).play();
    });
}

如果你想只在幻灯片加载时不同地播放它们中的每一个，那么你需要使用你提到的 afterSlideLoad 并可能为视频分配一个 id 标签，这样你就可以随时播放它们中的每一个，例如：

<video autoplay loop muted controls="false" id="video1">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

注意视频元素中的 id="video1"。现在在 jQuery 代码中：

afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
    //for section 2 slide 2
    if (index == 2 && slideIndex == 2) {

        //playing #video1
        $('#video1').each(function () {
            //playing the video
            $('video').get(0).play();
        });
    }
}

FullPage JS 中的多个视频自动播放不起作用

Multiple videos autoplay in FullPage JS not working

javascript

jquery

html

video

fullpage.js