New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video attribute 'muted' not applied in Firefox #6887

Closed
madsfaerch opened this Issue Oct 23, 2017 · 5 comments

Comments

Projects
None yet
4 participants
@madsfaerch

madsfaerch commented Oct 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@HerringtonDarkholme

HerringtonDarkholme Oct 23, 2017

Member

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

Member

HerringtonDarkholme commented Oct 23, 2017

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

@HerringtonDarkholme

This comment has been minimized.

Show comment
Hide comment
@HerringtonDarkholme

HerringtonDarkholme Oct 23, 2017

Member

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.

Member

HerringtonDarkholme commented Oct 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@posva

posva Oct 23, 2017

Member

@HerringtonDarkholme Is this a Firefox problem then?

Member

posva commented Oct 23, 2017

@HerringtonDarkholme Is this a Firefox problem then?

@madsfaerch

This comment has been minimized.

Show comment
Hide comment
@madsfaerch

madsfaerch Oct 24, 2017

Curiously you can use to force vuejs to render dom props.

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

Is the next step to file a bug with Firefox?

madsfaerch commented Oct 24, 2017

Curiously you can use to force vuejs to render dom props.

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

Is the next step to file a bug with Firefox?

@posva

This comment has been minimized.

Show comment
Hide comment
@posva

posva Oct 24, 2017

Member

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

Member

posva commented Oct 24, 2017

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

@yyx990803 yyx990803 closed this in f2e00f7 Nov 2, 2017

lovelope added a commit to lovelope/vue that referenced this issue Feb 1, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment