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

Question

我已经在这里和 github（Alvaro 很好地解决了）上看到了很多关于在 FullPage.js 中启用视频自动播放的答案

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

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

据我了解，此功能需要与 afterSlideLoad 一起使用才能发生，但没有运气。有没有人在不同的幻灯片/页面上自动播放多个视频的经验？

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();
        });
    }
}