可以一键播放多个视频同时播放的声音吗？

Question

声音已静音，因此页面加载时视频会自动播放，我想要一个按钮来禁用所有视频的静音。

我已尝试使用 TagName 和 Class，但无法使其工作。

function toggleMute() {

var video=document.getElementById("dude")

if(video.muted){
	video.muted = false;
} else {
	video.muted = true;
}

}   

<button onclick="toggleMute();">
sound on
</button>
<a href=""><video id="baby" poster="" autoplay muted loop>
			<source src="baby.mp4" type="video/mp4"></video></a>
<a href=""><video id="joel" poster="" autoplay loop  muted>
				<source src="joel.mp4" type="video/mp4"></video></a>
<a href="inside/index.html"> <video id="dude" poster="" autoplay loop  muted><source src="dude.mp4" type="video/mp4"></video></a>

我希望所有自动播放的视频都能同时播放声音。

Answer 1

这应该可以解决问题，只需将所有视频元素的 ID 添加到 videos 数组中！

var videos = ['1', '2']; // Place your video ID's in this array!
function toggleMute() {
  videos.forEach(function(element) { // For each ID in the array, unmute/mute the ID
    if(document.getElementById(element).muted){
      document.getElementById(element).muted = false; //
     } else {
      document.getElementById(element).muted = true;
     };
  });
 };

<video id="1" src="https://ia803005.us.archive.org/17/items/big_buck_bunny_201906/big_buck_bunny.mp4" autoplay muted>Your browser doesn't support videos!</video>
<video id="2" src="https://ia803009.us.archive.org/22/items/big-buck-bunny/big-buck-bunny.mp4" autoplay muted>Your browser doesn't support videos!</video>
<button onclick="toggleMute()">Mute/Unmute</button> <!-- When this button is clicked, run the toggleMute() function -->

More about .forEach