Video attribute 'muted' not applied in Firefox

[madsfaerch]

Version

2.5.2

Reproduction link

https://codepen.io/madsfaerch/pen/XewjNb

Steps to reproduce

1. The pen consists of a simple Vue instance mounted to #app containing a video element with muted="muted".
2. Open the pen in Chrome and notice that the volume icon is set to muted and the video is muted when played.
3. Open the pen in Firefox and notice that the volume icon is set to unmuted and the video is unmuted when played.

What is expected?

That the video plays muted and controls show muted.

What is actually happening?

The video plays unmuted and the controls show unmuted. This is especially an issue with autoplaying videos.

---

Reproduced in Firefox 56.0 and FirefoxDeveloperEdition 57.0b10 on different machines running either macOS Sierra or High Sierra.

[HerringtonDarkholme]

Curiously you can use <video :muted="true"> to force vuejs to render dom props.

[HerringtonDarkholme]

Reduced reproduction:

var a = document.createElement('video')
a.setAttribute('muted', true)
a.setAttribute('controls', true)
a.innerHTML = '<source src="https://tyfc.co/static/videos/bill.webm" type="video/webm"></source>'
document.body.appendChild(a)

Firefox won't respect attribute set on video later.

[posva]

@HerringtonDarkholme Is this a Firefox problem then?

[madsfaerch]

Curiously you can use

@HerringtonDarkholme Thanks for this. I will use it for the time being.

Is the next step to file a bug with Firefox?

[posva]

I don't think it's a firefox bug actually.
Vue should keep muted without a value, but it's weird because there's also a warning for muted to be used with the prop modifier in the code but it doesn't seem to trigger

[HCuma]

if someone having this error again you should use :muted="ref(true)", but make sure that u imported ref from vue.