[英]Toggle Mute/Unmute video's Audio progressively
With this code I want to toggle mute/unmute a playing video's Audio with a fadeIn fadeOut effect: 使用此代码,我想使用fadeIn fadeOut效果切换播放视频的音频的静音/取消静音:
const btn = document.getElementById('mute'),
video = document.querySelector('#video_mainhub');
btn.addEventListener('click', () => {
if (btn.value === 'unmuted') {
btn.value = 'muted';
btn.innerHTML = '<i class="fas fa-volume-mute"></i>';
$('#video_mainhub').animate({volume: 0}, 1000);
video.muted = true;
} else {
btn.value = 'unmuted';
btn.innerHTML = '<i class="fas fa-volume-up"></i>';
$('#video_mainhub').animate({volume: 1}, 1000);
video.muted = false;
}
});
<a id="mute" value="muted"><i class="fas fa-volume-mute"></i></a>
However, it is not working, anything I'm doing wrong? 但是,它不起作用,我做错了什么吗?
Thanks. 谢谢。
A few things we can identify and improve. 我们可以识别和改进的几件事。
value
attribute so btn.value = 'muted'
amounts to nothing value
属性,因此btn.value = 'muted'
innerHTML
which can be expensive in the grand scheme of things. innerHTML
,这在宏伟的方案中可能会很昂贵。 .animate()
to modify the volume. .animate()
来修改音量。 But that opens another avenue and for demonstration purposes we'll stick to what you know. Try this. 尝试这个。
const $btn = $('#mute'), $video = $('#video_mainhub') let isAnimating = false $btn.on('click', () => { if (isAnimating) return let video = $video[0] let volumeTo; if (video.muted) { video.muted = false video.volume = 0 } if (video.volume > 0) volumeTo = 0 else if (video.volume < 1) volumeTo = 1 // Toggle icon $btn.find('.fas') .removeClass(volumeTo === 1 ? 'fa-volume-mute' : 'fa-volume-up') .addClass(volumeTo !== 1 ? 'fa-volume-mute' : 'fa-volume-up') // Toggle volume isAnimating = true $video.stop(true, true).animate( {volume: volumeTo}, 1000, () => isAnimating = false ) })
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <video id="video_mainhub" playsinline autoplay muted controls width="400" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"></video> <a id="mute"><i class="fas fa-volume-mute"></i></a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.