如何在视频背景上添加静音/取消静音按钮[在Divi-WordPress]

Question

如何在视频背景（MP4）上放置“静音/取消静音”按钮？

网站链接：http://bsibasketball.com/

任何帮助将不胜感激。

非常感谢您！

Answer 1

使用此脚本尝试：

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

btn.addEventListener('click', () => {
  if (btn.value === 'unmuted') {
    btn.value = 'muted';
    btn.innerHTML = 'Unmute';
    video.muted = true;
  } else {
    btn.value = 'unmuted';
    btn.innerHTML = 'Mute';
    video.muted = false;
  }
});

<video id="myVideo" autoplay>
  <source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<br>
<button id="mute" value="unmuted">Mute</button>

您可以随意使用它。您还可以使用户单击视频而不是按钮。