The media attribute should be allowed in <source> for videos. I have a case where a different video is served depending on the orientation media property鈥攖he classic "art direction" motivation. Having a media condition for <source> would be much more practical than having yet another JS listener ; after all we already enjoy one for <picture> elements, for that exact same case.
All 8 comments
The media attribute should be allowed in <source> for videos. I have a case where a different video is served depending on the orientation media property鈥攖he classic "art direction" motivation. Having a media condition for <source> would be much more practical than having yet another JS listener ; after all we already enjoy one for <picture> elements, for that exact same case.
So the "layout adaption" or "art direction" use case seems like it's valid for wanting a declarative way to do this, but then the loading algorithm should restart when the MQ matching changes. Which may come down to: how common is art direction videos?
More complications:
if a new video is loaded as a result of environment changes, should the UA try to seek to the same time in the new video? What if the duration is different?
How important is a "seamless swap"? img loads the new image in the background, and swaps when it's fully loaded. What should video do?
It would be useful to review pages/apps that serve different videos based on MQ (using script), to understand what is needed.
@zcorpan thank you for attracting attention to this issue.
In my opinion, this attribute has the most impact on page loading. Changing MQ and swapping video sources during website lifecycle has a secondary priority.
I think all these complications are solvable and implementing almost any behavior is better than not implementing it at all. But I agree that it should be investigated and selected the best available implementation.
My thoughts on the above complications:
"resource selection algorithm" runs only once, so it couldn't be adaptive.
It should not runs only once, instead it should run when it needed
if a new video is loaded as a result of environment changes, should the UA try to seek to the same time in the new video? What if the duration is different?
It should try to seek to the same time in the new video.
If the duration is significantly different, e.g. 10% of duration change, we can assume that it is not the same video, so in this case, we can try to seek to the same time for consistency or start from the beginning, I guess it does not really matter here.
How important is a "seamless swap"? img loads the new image in the background, and swaps when it's fully loaded. What should video do?
Seamless swap for videos is desirable
Edited badly: To try and clarify use cases and why I've mentioned aspect-ratio.
Problem seems to be:
There is no Art Direction for <video>
Viable Use-Cases:
video on mobile is a different aspect-ratio than on desktop or vice-versa
video on mobile is shorter in time-length than the desktop, or vice-versa
video on mobile is different aspect-ratio AND time-length than on desktop, or vice-versa.
An example that people may remember is that PayPal used to have a huge banner video on desktop, with a different aspect-ratio video for mobile (or maybe they just trimmer the excess width off with css, to the same effect to a degree).
@zcorpan@shrpne I agree that these seem like issues that can be fixed without breaking backwards compatibility or existing implementations of <video>. Perhaps additional attributes on <video> or <source> to achieve Art Direction on <video>'s.
I'd also like to see aspect-ratios #4968 introduced if MQ are indeed going to be added to <source> of <video>.
It seems beyond silly to discuss MQ and Art Direction for <video> without discussing aspect-ratio at all considering that is a direct use-case factor for WHY media-queries / art direction is warranted.
Reasoning:
I think the basis we can agree on here is that the developer will know whether each source is identical in video-length, aspect-ratio, or is an entirely different video.
if a new video is loaded as a result of environment changes, should the UA try to seek to the same time in the new video? What if the duration is different?
How important is a "seamless swap"? img loads the new image in the background, and swaps when it's fully loaded. What should video do?
I think an attribute on <video> like seamless="true" would solve this for when the developer knows they have same-length videos on each source and only dimensions/aspect-ratio is changing with the MQ. Default will be false to maintain compatibility.
Addition Problem - extending the base problem
However, my concern with Video Art Direction is when there are multiple <source>'s with different file formats..
Per google
Not all browsers support the same video formats. The element lets you specify multiple formats as a fallback in case the user's browser doesn't support one of them.
In this case should there be an attribute introduced to 'link' them so the browser knows they are identical in video length? <source group="1">?
This seems a bit convoluted when you start to add MQ (and width/height attributes for aspect-ratio) to each source.. the code gets a bit redundant and bloated.
Perhaps a new element, say <sgroup> should be used to specify the MQ (and aspect-ratio for the grouped sources), with multiple <source> under <sgroup> simply being a different format available.
It's impossible to evaluate proposals without first having a common understanding about use cases and requirements. See https://whatwg.org/faq#adding-new-features
I think this issue is about the art direction for video use case; please file new issues to discuss other use cases.
If you want to experiment with different syntaxes or solutions, I suggest doing that by creating a custom element that polyfills the thing you want. If this identifies missing primitives to be able to do what you want, that's useful to know. If you come up with a pattern that is common on the web and it would be better to have it natively supported, that's also useful to know.
And again, if you have examples of live web sites that do this kind of thing today, please share.
We also heavily rely on art direction using the <picture> tag on https://www.shopflamingo.com for our heroes, and would love to extend that same functionality to <video> elements using the media attribute on <source>s as well.
Being able to differentially load a single video <source> based on the client's viewport width (which may not be known on the server / at build time), and keeping potential URLs in the HTML as opposed to managing them via JavaScript also seem like great performance wins.
I agree with others that aspect ratio feels important to this discussion, that a seamless swap would be a nice to have, and that questions around seeking behavior are less important than enabling this in the first place.
We rely heavily on art direction for videos. Many of our articles contain cinemagraphs or short video loops. To give the users the best experience we deliver a different aspect based on the users screen. Often that means delivering a 16:9 video to desktop users and a 1:1 video for mobile devices, as in the example below.
We currently use css and a custom element to swap between two or more video elements.
shrpne
joachimesque
on 29 May 2019
zcorpan
on 8 Oct 2019
AndresInSpace
on 8 Oct 2019
brimtown
on 10 Oct 2019
johannesodland
on 19 Mar 2020
iane87
路
3Comments
jyasskin
路
3Comments
tkent-google
路
3Comments
empijei
路
3Comments
NOVALISTIC
路
4Comments
Most helpful comment
The
mediaattribute should be allowed in<source>for videos. I have a case where a different video is served depending on theorientationmedia property鈥攖he classic "art direction" motivation. Having amediacondition for<source>would be much more practical than having yet another JS listener ; after all we already enjoy one for<picture>elements, for that exact same case.