Question

我使用fullscreen.js在每张幻灯片上显示包含视频的多张幻灯片。我想使用afterSlideLoad事件来执行以下操作：

将上一张幻灯片视频静音
取消静音＆＃39;活跃＆＃39;中的视频滑动

我得到的最远的是在幻灯片2加载时取消静音视频，但是在将幻灯片留到下一个视频后，它仍然保持静音状态。

<script type="text/javascript">

    $(document).ready(function() {
        $('#fullpage').fullpage({
            verticalCentered: true,
            fitToSection: true,
            controlArrows: false,
            afterRender: function(){
                //playing the video
                $('video').get(0).play();
            },
            afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                $('#myVideo').prop('muted', false)
            }, 
        });
    });

</script>

<div id="fullpage">
    <div class="section" id="section1">

        <div class="slide" id="slide1">
            <video autoplay loop muted id="myVideo">
                <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            </video>
        </div>

        <div class="slide" id="slide2">
            <video autoplay loop muted id="myVideo2">
                <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
                <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
            </video>
        </div>

    </div>
</div>

Answer 1

从docs开始，我认为您可以使用onLeave()回调：

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        // mute video from last slide
        $('video').eq(index-1)[0].muted = true;
        // unmute video from current slide
        $('video').eq(nextIndex-1)[0].muted = false;
    },
});

有趣的是，索引从1开始，因此您必须使用index-1。

使用fullpage.js静音/取消静音视频

1 个答案: