1513109 - [media] attribute does not work on the html video <source> element

Status: NEW

(Core :: DOM: Core & HTML, defect, P3)

Description

[Nikita E]

https://jsfiddle.net/fx09uzbk/

<video autoplay muted playsinline>
    <source media="(max-width: 800px)" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
    <source media="(min-width: 801px)" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type='video/mp4'/>
</video>

First video source plays while not matching media query on the desktop.
But second video source should play, as it matches media query.

Firefox does not recognize [media] attribute on the <source> element of the html video


Someone says, that video media query support has been removed from Google Chrome 34+: https://walterebert.com/playground/video/media-queries/

As I can see in the spec, media attribute should be supported: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-source-media

Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=913720

Simmilar SO question: 
https://stackoverflow.com/questions/25907930/chrome-not-respecting-video-source-inline-media-queries

Comment 1

[Nikita E]

Maybe this is the same bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1501326

Comment 2

[Daniel Bodea [:danibodea]]

I do not know whether this issue is valid or not. I reproduced the just the same both in Firefox and Chrome.
Also, Chrome is not supporting media queries for video html 5 tag. A work around for this is to use plain Javascript or Jquery.
A developer will know what to do next. Thank you for your contribution!

Comment 3

[Edgar Chen [:edgar]]

Alastor, do you know whether video supports matching media query for source selection? Thanks.

Comment 4

[Alastor Wu [:alwu]]

HTMLMediaElement has't supported media query yet.

Comment 5

[Nikita E]

media attribute on the html video works fine in Safari 12 and Edge 18

Comment 6

[Nikita E]

Looks like spec changed sometime and for now. It says:
The srcset, sizes, and media attributes must not be present when source element's parent is a media element
https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element:the-source-element-10

It looks strange to me because these attributes can save much more downloading bytes for video than for images.
So I have opened an issue in WHATWG repository https://github.com/whatwg/html/issues/4544