I added the html video code to the mute/unmute button. Here's my conflict, I tried to add my video to play automatically with the sound and someone muted the video to give some solution (when the sound is muted by clicking the mute button and the video should always be playing), but when is the play video sound Not playing automatically, then click the mute button Sound is playing, does anyone have a solution?
Thanks
here the code
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
btn.innerHTML = video.muted ? "Unmute":'Mute';
video.muted = !video.muted;
}
<div class="content">
<button id="myBtn" onclick="myFunction()">Mute</button>
</div>
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Perhaps this is closer to what you want? It also might help to add the controls attribute as this is generally better practice. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-controls
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
video.muted = !video.muted;
btn.innerHTML = video.muted ? "Unmute":'Mute';
}
<video autoplay loop id="myVideo">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<button id="myBtn" onclick="myFunction()">Toggle Mute</button>
</div>