添加视频静音按钮

Question

我希望在我的页面上为视频创建一个静音按钮。我的页面有一个带循环的背景视频，没有别的。但是一段时间后声音很烦人。我找到了一个停止视频的按钮，但之后我又无法播放了。另外，我正在寻找一个静音按钮。

这就是我目前的HTML。

<video autoplay id="bgvid" loop>
<source src="videos/chat/chat_noir.mp4" type="video/mp4">
</video>

<div class="mute" onclick="document.getElementById('bgvid').pause()">
<a href="#">Activer/Désaciver le son</a>
</div>

我有.pause功能，但如何让视频继续播放并仅删除声音？如何重播视频或再次发出声音？

Answer 1

您只需要介绍muted html标记的video属性的用法，如下所示：

<div class="mute" onclick="document.getElementById('bgvid').muted = !document.getElementById('bgvid').muted">
  <a href="#">Mute / Avtivate</a>
</div>

参见 JSFiddle example 。

Answer 2

您可以将控件属性添加到视频代码中。

<video autoplay id="bgvid" loop controls>

因此，您可以暂停和静音视频。 或者如果您真的想拥有自己的静音按钮，请参阅this。