Mute ALL Audio on a Page - html

Question

I have a landing page where the user can Login and signup and in the background is a Trailer for the site. The video has audio, and is a .mp4 file.
My main goal is to get a feature where the user can click a certain button and all page audio will be muted.
Many thanks
---HTML WITH VIDEO---
<div class="Main animated fadeIn">
<!--To make the Site Unique, I have included Several Trailers for the Main Landing Page !-->
<video autoplay="" id="bgvid" loop="" poster="polina.jpg"><source src=
"img/indexMV.mp4" type="video/mp4"> <source src="img/indexMV.mp4"
type="video/mp4"></video>
</div>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="mute_all">Mute all</button> |
<button id="unmute_all">UnMute all</button>
<br/>
<script>
$(document).ready(function(){
/*** Mute all ***/
$('#mute_all').on('click',function(){
/*** Mute all video and audio on page ***/
$('body video, body audio').each(function(){
/*** Do it here globally ***/
$(this).prop('muted', true);
});
});
/*** UnMute all ***/
$('#unmute_all').on('click',function(){
/*** Un Mute all video and audio on page ***/
$('body video, body audio').each(function(){
/*** Do it here globally ***/
$(this).prop('muted', false);
});
});
});
</script>
<h4>Video</h4>
<video id="myVideo" width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br/>
<h4>AUdio</h4>
<audio width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"> Your browser does not support HTML5 video.
</audio>

Answer 2

Just get a reference to your video and you can mute/unmute it
var vid = document.getElementById("bgvid");
vid.muted = true; // to mute
vid.muted = false; // to unmute

Answer 3

You wanted to be able to mute any and all sources of audio, then you'll need to be able to collect references to all instances of video and/or audio playing. This is what this demo does:
Plays/Pauses 5 videos individually or all at once.
Mute/Unmute volume individually or all at once.
This is the process:
Make a NodeList (vPlayers) of all video elements with the class of .vPlayer.
Take the NodeList (vPlayers) and convert it into an array (vArray).
EventListeners are added to the buttons, vPlay and vMute and once triggered, by a click, the callback function will iterate through the vArray.
Each video element (.vPlayer a.k.a. vArray[i]) will be checked:
to see if it's playing a video (playToggle function), or ...
to see if it's muted (muteToggle function).
After the preliminary status check, playToggle and muteToggle will play/pause and mute/unmute each vPlayer according to vPlayer's state.
const vids = Array.from(document.querySelectorAll("video"));
const vControl = document.forms.vControl;
const vC = vControl.elements;
const vPlay = vC.vPlay;
vPlay.addEventListener('click', playToggle);
function playToggle(e) {
e.target.textContent = e.target.textContent === '▶️' ? '⏸️' : '▶️';
vids.forEach(v => v.paused ? v.play() : v.pause());
}
const vMute = vC.vMute;
vMute.addEventListener('click', muteToggle);
function muteToggle(e) {
e.target.textContent = e.target.textContent === '🔊' ? '🔇' : '🔊';
vids.forEach(v => {
if (v.muted) {
v.muted = false;
} else {
v.muted = true;
}
});
}
button {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 15px;
width: 54px;
line-height: 36px;
font: 300 2.5ch/1 'Consolas';
color: #EEE;
background: rgba(83, 83, 83, 0.25);
border: 3px outset grey;
border-radius: 9px;
cursor: pointer;
pointer-events: auto;
}
button:hover {
background: transparent;
color: #00D;
border: 3px inset blue;
}
.vBox {
display: table-cell;
}
#vControl {
width: 295px;
height: 160px;
display: inline-table;
}
fieldset {
display: flex;
}
<section class="vBox">
<video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs21s3.png" width="320" height="180" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4" type="video/mp4">
</video>
<video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs12s3.png" width="320" height="180" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
<form id="vControl" name="vControl">
<fieldset>
<button id="vPlay" type='button'>▶️</button>
<button id="vMute" type='button'>🔊</button>
</fieldset>
</form>
</section>