Question

我已经在这里找到了很多答案，并且在FullPage.js中启用了视频自动播放的github（由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();
        });
    }
}

FullPage JS中的多个视频自动播放无法正常工作

1 个答案: