Fullpage.js允许其部分处于 Activity 状态时自动播放音频(和视频)。我有10个部分,每个部分都有不同的音频/视频元素,并且希望当该部分变为 Activity /不 Activity 状态时音频会逐渐淡入和淡出。
我已经设置了播放/暂停/静音/取消静音按钮(并且可以正常工作),以使用此代码淡入音频,但是在过渡时也希望如此。
$('#mute').on('click', function() {
$('body audio, body video').each(function() {
$(this).animate({volume: 0}, 1000, function () {
muted = true;
});
});
});
我找到了扩展的相关部分来控制自动播放/暂停,但是似乎无法弄清楚如何正确地淡入和淡出……它永久地使所有内容静音,或者抛出页面错误。我假设正确的处理方法是从一开始就将所有内容的音量全局设置为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();
}
});
和自动暂停(第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上所做的工作。
最佳答案
无需进入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;
});
});
}
});
关于jquery - 使用fullpage.js淡入/淡出section.active上的所有html5音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46757562/