使用 fullpage.js 淡出 in/out section.active 上的所有 html5 音频
Fade in/out all html5 audio on section.active with fullpage.js
Fullpage.js 允许音频(和视频)在其部分处于活动状态时自动播放。我有 10 个部分,每个部分都有不同的 audio/video 元素,并且希望当部分变为 active/inactive.
时音频淡入淡出
我设置了 play/pause/mute/unmute 个按钮(并且可以正常工作)以使用此代码淡化音频,但希望在转换时发生同样的情况。
$('#mute').on('click', function() {
$('body audio, body video').each(function() {
$(this).animate({volume: 0}, 1000, function () {
muted = true;
});
});
});
我找到了控制 autoplaying/pausing 的扩展的相关部分,但似乎无法弄清楚如何正确地淡入淡出...要么永久静音所有内容,要么抛出页面错误。我假设正确的方法是从一开始就将所有内容的音量全局设置为 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, and what I'm actually working on 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;
});
});
}
});
Fullpage.js 允许音频(和视频)在其部分处于活动状态时自动播放。我有 10 个部分,每个部分都有不同的 audio/video 元素,并且希望当部分变为 active/inactive.
时音频淡入淡出我设置了 play/pause/mute/unmute 个按钮(并且可以正常工作)以使用此代码淡化音频,但希望在转换时发生同样的情况。
$('#mute').on('click', function() {
$('body audio, body video').each(function() {
$(this).animate({volume: 0}, 1000, function () {
muted = true;
});
});
});
我找到了控制 autoplaying/pausing 的扩展的相关部分,但似乎无法弄清楚如何正确地淡入淡出...要么永久静音所有内容,要么抛出页面错误。我假设正确的方法是从一开始就将所有内容的音量全局设置为 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, and what I'm actually working on 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;
});
});
}
});