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.

So far i've tried this with no luck.

HTML

<video width="640" height="264" muted autoplay webkit-playsinline src="'+videoURL+'"></video>'

JS

$(document).on("click",".containerVolume",function(e){
        if(isMuted){
            $('video').prop('muted', false);
        }
        else{
            $('video').prop('muted',true);
        }
});

var videos = document.querySelectorAll('video');
      if (location.search === '?enabled=false') 
      {
      } else if (location.search === '?enabled=true') {
           enableVideos(false);
      } else {
         enableVideos();
      }
      function enableVideos(everywhere) {
          for (var i = 0; i < videos.length; i++) {
             window.makeVideoPlayableInline(videos[i], !videos[i].hasAttribute('muted'), !everywhere);
          }
      }

this works: `document.getElementsByTagName("video")[0].removeAttribute("muted");` — DIEGO CARRASCAL, Aug 19 '16 at 15:05

score 43 · Answer 1 · edited Dec 09 '19 at 09:29

43

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;
});

edited Dec 09 '19 at 09:29

insign

5,353
1
38
35

answered Aug 19 '16 at 14:56

Glen Despaux Jr

1,064
7
19

1

removed the muted attr but still the video is mute – Özgür Ersil Aug 19 '16 at 15:12
1

I have updated my answer. `.muted` is the proper way, if this is not working on your particular code there may be other issues. Please check the linked JSFiddle for a working example. – Glen Despaux Jr Aug 19 '16 at 15:20
1

According to the link for the repo you're using: _Limitations: Needs user interaction to play videos with sound (standard iOS limitation)_ Not sure you can work around an OS limitation. – Glen Despaux Jr Aug 22 '16 at 13:35
the video autoplays by itself but without sound and then it can not be unmute even by the user action – Özgür Ersil Aug 22 '16 at 13:38
This would be much easier to help with if we had a link to either your _live code_ or a _fiddle with the problem reproduced_. – Glen Despaux Jr Aug 22 '16 at 13:45
this is the [link](http://bfred-it.github.io/iphone-inline-video/demo/) of an autoplay video but can not make it unmute – Özgür Ersil Aug 22 '16 at 14:03
Simple and complete. – vhs Jun 30 '21 at 02:57

score 4 · Answer 2 · answered Feb 05 '21 at 21:10

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.

score 1 · Answer 3 · answered Aug 19 '16 at 15:03

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>

answered Aug 19 '16 at 15:03

Kevin Jantzer

9,215
2
28
52

@ÖzgürErsil - do you see the video? – Kevin Jantzer Aug 19 '16 at 15:14
yes , it start with mute and nothing changes, i will check later – Özgür Ersil Aug 19 '16 at 15:15
@ÖzgürErsil – hmm, weird. It works for me. `.muted` is valid: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted – Kevin Jantzer Aug 19 '16 at 15:16
@ÖzgürErsil – maybe a problem with Firefox? http://stackoverflow.com/a/32419889/484780 – Kevin Jantzer Aug 19 '16 at 15:18
i will check later (your function is inline `toggleMute()` maybe that s why ) – Özgür Ersil Aug 19 '16 at 15:18

B.A.B. · Answer 4 · 2019-04-30T23:38:40.397

1

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.

edited Apr 30 '19 at 23:38

answered Apr 30 '19 at 21:44

B.A.B.

11
2

1

does not work if video starts muted – strix25 Nov 06 '22 at 19:33

How to unmute html5 video with a muted prop

4 Answers4

Linked