代码之家 › 专栏 › 技术社区 › chrscblls

淡入/淡出部分上的所有html5音频。使用fullpage激活。js公司

fullpage.js audio html jquery

1

chrscblls · 技术社区 · 8 年前

Fullpage.js 允许音频(和视频)在其部分处于活动状态时自动播放。我有10个部分,每个部分都有不同的音频/视频元素,希望音频淡入&当节变为活动/非活动时,退出。

我已经设置了播放/暂停/静音/取消静音按钮(并正在使用)以使用此代码淡出音频,但我希望在过渡时也能这样。

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

对于自动播放(第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();
            }
        });

和自动暂停(线路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 .

1 回复 | 直到 8 年前

1

Alvaro 8 年前

不需要进入全文。js代码来做。事实上,如果你想一直更新到最新的完整页面,就不应该这样做。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;
            });
         });
    }
});