How to unmute html5 video with a muted prop

Question

I\'ve created a simple video block with muted (for mobile autostart) but now i can not change the mute state...

I used that repository , fiddle link would be great.

Answer 1

You should use videoEl.muted

var video = document.getElementById('video');

function toggleMute(){
  video.muted = !video.muted;
}

<video id="video" width="300" controls muted src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

<br><br>
<a onclick="toggleMute()">Toggle Mute</a>

Answer 2

You could simply mute/unmute with

document.getElementById("theIdOfYourVideoGoesHere").volume=0;

and

document.getElementById("theIdOfYourVideoGoesHere").volume=1;

(This thread appears to be two years old but today it was the number one top result in my google search)

---

Bilgisayar ne bilgiden anlar ne saygıdan. Çünkü o cansız bir düzenektir. O kadar.

Answer 3

Glen's Answer is spot on, I just want to provide insight for why it was not working for Özgür, the OP (and myself, which is what led me here).

Basically it comes down to the fact that the muted property and the muted attribute are different. It doesn't seem super well documented (that I have found), but the behavior I experienced is that the muted attribute (accessed via element.getAttribute and related methods) impacts the initial state, but toggling it impacts nothing. On the other hand. It seems the muted property (accessed via videoEl.muted, as Glen pointed out), is how to change the muted state after page load.

Answer 4

Try this:

function toggleMute() {

  var video=document.getElementById("myVideo");

  video.muted = !video.muted;

}

Check example here

If your own code is not working, try adding an id to your video/element you want the click to register on and using:

var video=document.getElementById("myVideo") ;   

$(video).on("click", function(e){
  video.muted = !video.muted;
});