Unable to Mute HTML5 Video Tag in Firefox

Question

I want to make a video call with webrtc. I have two streams, one is local and the second one is remote stream.

In Chrome, I mute my video tag in order not to hear my voice which leads to echo. My HTML tag is like;

<video style="position:absolute;right:5px;bottom:5px;display: inline;" class="localVideo" autoplay="autoplay" 
muted="true" 
src="mediastream:3ffffe01-da89-44d9-b9cf-454b11ec6a6a" height="25%" width="25%"></video>

In Firefox muted="true" property not working, so that I hear my own voice. I tried to set muted propery with many ways in other topics like;

var video = document.querySelector("#movie");     
video.muted = true;

different variations of this code snippet with jquery didn't worked.

Then I've decided to add controls property to the video tag, in order to watch how Firefox control buttons works. I've seen that mute button on Firefox controller doesn't works either.

This issue occurs in both Firefox 35 and Firefox ESR 31.5 with windows 7 - 8.1, macOS with Yosemite. I get media stream via webrtc libraries localStream.

Is this a known issue, if so is there any workaround to overcome this issue?

Thanks.

Answer 1

I also came across this issue with Firefox, the simplest solution I've found is using the onloadedmetadata event as below:

video {
  width: 200px;
  height: 200px;
}

<video
  src="https://scontent-lhr3-1.cdninstagram.com/t50.2886-16/12930587_1020784647992081_252978711_n.mp4"
  muted
  onloadedmetadata="this.muted = true"
  onmouseenter="play()"
  onmouseleave="pause()"
  playsinline>

Answer 2

Note: There's a better answer in this question

I also had this problem in FF45. The solution was to set muted in code vs. the DOM.

$("#browserCheck").get(0)
<video id="browserCheck" class="img-responsive" autoplay="" muted="true">
$("#browserCheck").get(0).muted
false
$("#browserCheck").get(0).muted = true
true
$("#browserCheck").get(0).muted
true