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; ```

``` 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 Yosem…

Accepted Answer

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>
```

Unable to Mute HTML5 Video Tag in Firefox

Solution

Problem

Related problems