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

Question

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

1. 将上一个幻灯片视频静音
2. 取消“事件”幻灯片中的视频静音

我得到的最远的是在幻灯片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。