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

Question

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

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

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