时间戳

首页 > 解决方案 > JavaScript html5 视频

javascript - JavaScript html5 视频

问题描述

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

我需要做的是为所有视频定制一个静音按钮，这意味着：

有没有办法做到这一点？

标签： javascriptvideohtml5-video

解决方案

没有你的 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;
}

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

推荐阅读