时间戳

首页 > 解决方案 > 逐渐静音/取消静音视频的音频

javascript - 逐渐静音/取消静音视频的音频

问题描述

使用此代码，我可以切换静音/取消静音播放视频的音频：

const btn = document.getElementById('mute'),
      video = document.querySelector('video');

btn.addEventListener('click', () => {
  if (btn.value === 'unmuted') {
    btn.value = 'muted';
    btn.innerHTML = '<i class="fas fa-volume-mute"></i>';
    video.muted = true;
  } else {
    btn.value = 'unmuted';
    btn.innerHTML = '<i class="fas fa-volume-up"></i>';
    video.muted = false;
  }
});

<a id="mute" value="muted"><i class="fas fa-volume-mute"></i></a>

当单击按钮而不是即时静音/取消静音时，如何添加淡入/淡出音频效果？

谢谢。

标签： javascript

解决方案

您可以使用 JQuery .animate 淡入/淡出视频。动画音量为双倍（0 到 1 之间）

var $video_player = $('#video-player');
var $mute_button = $('#mute-button');

$mute_button.on('click', () => {
   
   $video_player.toggleClass('mute');
   
   if ($video_player.hasClass('mute')) {
    // Fade out audio
    $video_player.animate({ volume: 0 }, 5000);
    $mute_button.html('unmute');
   } else {
    // Fade in audio
    $video_player.animate({ volume: 1 }, 5000);
    $mute_button.html('mute');
   }
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video id="video-player" width="100%" height="150px" controls autoplay>
  <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

<center><button id="mute-button">mute</button></center>

推荐阅读