我可以用一个按钮播放同时显示多个视频的声音吗?

Question

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

我已经尝试使用标签名称和类，但无法使其工作。

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 -->

关于.forEach