javascript - 逐步切换视频音频静音/取消静音

Question

使用此代码，我想使用淡入淡出效果切换静音/取消静音正在播放的视频音频:

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>

但是，它不起作用，我做错了什么吗？

谢谢。

Answer 1

我们可以识别和改进一些事情。

• anchor 元素没有 value 属性，因此 btn.value = 'muted' 无济于事
• 利用 jQuery 来简化手头的事情。
• 我们可以切换图标类，而不是替换 innerHTML，这在总体方案中可能会很昂贵。
• 我不会依赖 .animate() 来修改音量。但这开辟了另一条途径，出于演示目的，我们将坚持您所知道的内容。

试试这个。

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>