JavaScript html5 视频答案

【问题标题】：JavaScript html5 videoJavaScript html5 视频
【发布时间】：2021-04-16 13:13:07
【问题描述】：

我有一个带有简单 html 代码的示例 html5 视频。

我需要为所有视频定制一个静音按钮，意思是：

如果用户点击一个视频的静音/取消静音按钮，所有其他视频也会静音/取消静音李>

有什么办法吗？

【问题讨论】：

标签： javascript video html5-video

【解决方案1】：

如果没有您的 html 代码，它会非常模糊，但在 JS 中您可以做到：

这是我使用的文档的链接：

https://www.w3schools.com/tags/av_prop_muted.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_muted

<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>

<video id="myVideo" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("myVideo");

function enableMute() { 
  vid.muted = true;
} 

function disableMute() { 
  vid.muted = false;
} 
</script>

因此，您可以触发对所有视频的操作：

最好在所有视频标签上添加一个类或 id

让 js 了解它们

var vid  = document.getElementById("myVideo");
var vid1 = document.getElementById("myVideo1");
var vid2 = document.getElementById("myVideo2");
var vid3 = document.getElementById("myVideo3");
var vid4 = document.getElementById("myVideo4");

在此处触发操作的按钮上添加 onClick 操作静音操作将使用您元素的静音属性静音或取消静音您的视频，该操作会喜欢

function enableMute() { 
  vid.muted  = true;
  vid1.muted = true;
  vid2.muted = true;
  vid3.muted = true;
  vid4.muted = true;
}

我认为，如果您将相同的类添加到所有元素，并在单击按钮时触发的操作中循环遍历所有元素，然后为每个元素进行更改，那么我认为您可以在没有这么多重复代码的情况下做到这一点他们的财产，但不知道该怎么做

【讨论】：