切换Mute/Mute视频的音频

Question

有了这段代码，我想用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>

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

谢谢。

Answer 1

一些我们可以识别和改进的东西。

• 锚元素没有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>

​