-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Lazy loading video element poster attribute #6636
Comments
cc @whatwg/media @domfarolino |
Paging some people involved in #3752: @bengreenstein @domenic @jakearchibald @zcorpan If we just add a |
Gut feeling: Otherwise, combinations like |
I wonder if it makes more sense to bring all of <video use-first-child-img-or-picture-as-poster-also-rename-this-attribute>
<source ...>
<picture>
<source ...>
<img loading="lazy" decode="async" srcset="..." sizes="...">
</picture>
</video> Otherwise how do we add |
If |
I like that!
|
It's not so weird if it also applies to |
I think these are the options to solve this issue:
For lazy-loading of the video:
|
I'm not sure it's worthwhile to specify lazy-loading for video, since |
@zcorpan would
mean that mean authors would be able to provide alternative text for the poster then? because that'd be something people have wanted for quite some time, and would be most welcome. |
@scottaohara maybe, but I think it's better to discuss alt text (or accessible name) for For now, |
We're talking about different things, @zcorpan. Those attributes can be used to provide a name for the 'video' element, but they would not (and should not) be used to provide a description for the poster itself. This graphic is often used (misused) to provide some sort of title card with content that is only available via that image, and is only relevant when that image is displayed, has long been a frustrating topic for some. Here is a closed HTML AAM issue which then links to other past issues on the subject. (following the links leads to some pretty heated 'discussion') Understood if you think this should be spun out into a separate issue, but the reason I brought it up is because of your mention of "all of img's features", and if this idea is accepted, then this image (and thus its alternative text) could be exposed. |
Here's what I'm reading from the various conversations above, also with my preference. <video
src="url_of_src" // URL of video source
poster="url_of_img" // URL of image source
aria-label="Video element name" // Describes the name of the video element, similar to describing a button label
alt="Description of video content" // Describes the contents of the video itself, similar to image alt text
loading="lazy" // Lazy load the video element and poster image
preload="none" // Don't preload the video element, similar to loading="lazy", but could also help define how to lazy load the video
> It makes more sense for |
@scottaohara ok. Yeah, I think a separate issue would be best to align on how to expose the poster image to ATs. It might inform how we want to solve this issue, but still lazy loading and accessibility are orthogonal concerns. |
I think we should add |
Add a new posterloading attribute to the video element which controls lazy-loading of the poster image. Fixes #6636.
PR: #8428 This issue still has |
|
^^ @chrishtr for Chromium interest, as his team is likely to own the implementation work. |
Confirmed interest from Chromium. |
Add a new posterloading attribute to the video element which controls lazy-loading of the poster image. Fixes #6636.
This seems fine to me as well. In general it'd be great to have it better-defined how <video ...>
<picture slot="poster">...</picture>
</video> or pretty much anything (doesn't have to use the The shadow tree of
Where the ua-defined-controls contents are, well, UA-defined, and would include captions, the video controls, etc. I wouldn't oppose to the one-off extra attribute, but that would be perhaps a more flexible / better design over-all... Would there be appetite for such a thing? |
Thanks @emilio That would be like the second option in #6636 (comment) but without ID lookup (instead relying on It's more work, but we get more features. Curious to hear what others think. |
How common is |
Web Almanac: https://docs.google.com/spreadsheets/d/1T5oVAVmcH3sM6R-WwH4ksr2jFtPhuLXs3-iXXoABb3E/edit#gid=1515756004 - though Chromium use counter V8HTMLVideoElement_Poster_AttributeGetter is at 2.1123% and V8HTMLVideoElement_Poster_AttributeSetter at 2.0306%, but I assume this doesn't count use in HTML without author JS accessing the getter/setter, and if so, usage is probably higher. A quick query in httparchive sample_data (10,000 pages) gives 445 pages = 4.45% of pages, and 1743 pages use queries
445
1743 |
Incidentally I was looking at a similar query and the results are similar to what you have in the sample data. Uses the same data set as the Web Almanac 2022, (June 2022) sampled at 10%.
Query#standardSQL
CREATE TEMPORARY FUNCTION getAttributes(payload STRING)
RETURNS STRUCT<poster INT64> LANGUAGE js AS '''
try {
var almanac = JSON.parse(payload);
var obj = {
poster: 0,
};
for (var node of almanac.videos.nodes) {
if (typeof node.poster != "undefined") {
obj.poster++;
}
}
return obj;
} catch (e) {
return {};
}
''';
SELECT
client,
COUNTIF(total_video > 0) AS pages_with_videos,
COUNTIF(attributes.poster > 0) AS pages_with_poster,
COUNTIF(attributes.poster > 0) / COUNTIF(total_video > 0) AS pct_pages_with_poster,
COUNT(0) AS total_pages
FROM (
SELECT
_TABLE_SUFFIX AS client,
SAFE_CAST(JSON_EXTRACT_SCALAR(JSON_EXTRACT_SCALAR(payload, '$._almanac'), '$.videos.total') AS INT64) AS total_video,
getAttributes(JSON_EXTRACT_SCALAR(payload, '$._almanac')) AS attributes,
FROM
`httparchive.pages.2022_06_01_*` TABLESAMPLE SYSTEM(10 PERCENT)
)
GROUP BY
client |
I discussed with @chrishtr, he said supporting @emilio wrote <video ...>
<picture slot="poster">...</picture>
</video>
Yeah, I think we shouldn't use <video posterchild>
<img ...>
<source ...>
</video> (Please suggest other names for |
Does |
Given the resent reintroduction of the |
@annevk it might change behavior for legacy web content that already use |
Why not a new Non-video supporting browsers would ignore it. Video-supporting browsers without specific support for it would ignore it as well. |
But it would only do something when it's a child of a |
Sure. Much like adding a |
( |
I don't worry about what happens in non-video supporting UAs, most likely most of the web doesn't work in those browsers for other reasons anyway. I'm more concerned about currently existing web content and the effect for such content in new browsers. However, I haven't looked into how common it is to have an |
Art direction [out-of-the-box] would be a big plus when supporting prefers-reduced-motion. |
I like the sound of Edit: I suppose a child That said, if |
We discussed this in the latest WHATNOT meeting and concluded that the right direction seems to be to allow a child element to represent the poster image. Cognizant of @zcorpan's comments around compat, this would likely need to be an opt-in attribute on the Consequently I'd propose one of the following: 1. Use the
|
@keithamus has a third option of using a boolean attribute on a child element been considered? e.g: <video poster="path/to/fallback.jpg">
<source src="..." />
<img src="..." poster />
</video> This would then open the possibility of using other elements as posters in future too, for example |
I think adding an attribute to the child might get a little confusing; for example which candidate should the UA chose given multiple? <video poster="path/to/fallback.jpg">
<source src="..." />
<img src="..." poster />
<img src="..." poster />
<img src="..." poster />
</video> It could pick the first, but is that the authors intent?
I think having the attribute on the video does not necessarily preclude us from later including |
Isn't that the same problem we had with Given neither option 1 & 2 preclude implementing the below, I think we can rule my suggestion out anyway. Re: I think
|
Great to see this discussion. A child If it’d be possible to retain the possibility for the child |
I prefer this approach because it keeps the logic consistent and explicit for developers, while leveraging an established pattern. The concern about multiple poster attributes seems manageable. A simple rule—like prioritizing the first valid child with a poster attribute—aligns with how source elements are handled, maintaining consistency with the The explicitness of the attribute also addresses a key readability concern. A poster boolean attribute on child elements immediately signals its purpose, unlike more implicit solutions like nesting or inferring behavior based on position or other less obvious cues. As a developer, if I stumbled on this code out of context, I can immediately grasp what the child image with the poster bool is for. The other implementations are more implicit, which I don’t like. |
I did this now.
1% of the full dataset is 128,335 pages. Of the 872 pages that have an Examples: <video id="topVid" class="banner-video" loop="" width="" height="" autoplay="" muted="" playsinline="">
<!-- <source type="video/mp4" src="//s28.q4cdn.com/207566713/files/design/banner/Drone-footage-of-outdoor-grow-in-Prescott.mov" /> -->
<!-- <source type="video/mp4" src="//s28.q4cdn.com/207566713/files/design/banner/WatermelonGummyShowcase.mov" />-->
<source type="video/mp4" src="//s28.q4cdn.com/207566713/files/design/banner/HWC-Web.mp4">
<img src="../design/banner/vext-banner.jpg" alt="Your browser doesn't support HTML 5 Video">
</video> The URL in <video autoplay="" loop="" muted="">
<source src="https://www.psbboisjoli.ca/wp-content/themes/psbboisjoli/videos/introduction2.mp4" type="video/mp4">
<source src="https://www.psbboisjoli.ca/wp-content/themes/psbboisjoli/videos/introduction2.webm" type="video/webm">
<img src="https://www.psbboisjoli.ca/wp-content/themes/psbboisjoli/assets/images/bg-home.jpg" alt="">
</video> The image here looks like a suitable poster image for the video. <video autoplay="" loop="" muted="" inline="">
<source src="https://prostatecomplex.chicdz.com/wp-content/themes/hanout/inc/order-form/include/assets/img/processing.webm" type="video/webm">
<img data-recalc-dims="1" decoding="async" loading="lazy" src="https://i0.wp.com/prostatecomplex.chicdz.com/wp-content/themes/hanout/inc/order-form/include/assets/img/processing.gif?w=960&ssl=1">
</video> Here the In conclusion, having some opt-in seems worthwhile. |
A new attribute has the benefit of being feature-testable. I think an attribute on |
The ability to use Bikeshedding naming:
|
I think I agree with all of @zcorpan's comments. Although empty Regarding |
I don't have a strong feeling either way, but you could have an additional But a different attribute sounds fine too. |
This approach for lazy loading videos is close to perfect.
In a video gallery with many videos, using
preload="none"
can help speed up page loading with its lazy loading capability. The one missing feature is lazy loading the poster attribute image.I realize
loading="lazy"
only works foriframe
andimg
elements, but this one enhancement to the lazy loading capabilities would potentially be a noticeable performance improvement in addition to not preloading the videos.The text was updated successfully, but these errors were encountered: