Question

Fullpage.js允许音频（和视频）在其部分处于活动状态时自动播放。我有10个部分，每个部分都有不同的音频/视频元素，并且希望音频能够淡入淡出。当该部分变为活动/不活动时。

我有播放/暂停/静音/取消静音按钮设置（和工作）以使用此代码淡化音频，但希望在转换时发生相同的事情。

$('#mute').on('click', function() {
 $('body audio, body video').each(function() {
   $(this).animate({volume: 0}, 1000, function () {
        muted = true;
    });
 });
});

我发现扩展的相关部分控制了自动播放/暂停，但似乎无法弄清楚如何正确淡入和放大。 out ...要么永久静音一切，要么抛出页面错误。我假设正确的方法是从一开始就将全部的音量设置为0，然后如果prop.play == true则将音量设置为1？或者沿着这些方向做什么？

自动播放（第1662行）：

//playing HTML5 media elements
        panel.find('video, audio').each(function(){
            var element = $(this).get(0);

            if( element.hasAttribute('data-autoplay') && typeof element.play === 'function' ) {
                element.play();
            }
        });

和autopausing（第1700行）

//stopping HTML5 media elements
        panel.find('video, audio').each(function(){
            var element = $(this).get(0);

            if( !element.hasAttribute('data-keepplaying') && typeof element.pause === 'function' ) {
                element.pause();
            }
        });

我有一个非常基本的jsfiddle here，以及我在is here上实际工作的内容。

Answer 1

无需进入fullpage.js代码即可。实际上，如果您想继续更新到最新的fullPage.js版本等等，则不应该这样做。

您可以使用fullpage.js callbacks删除自动播放和暂停并自行完成。

要将它们静音，您可以执行以下操作：

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);

        leavingSection.find('audio, body video').each(function() {
           $(this).animate({volume: 0}, 1000, function () {
                muted = true;
            });
         });
    }
});

使用fullpage.js

1 个答案: