HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements

[Schepp]

What is the issue with the HTML Standard?

In addition to re-implementing support for the media attribute on HTML video <source> elements as well as adding srcset and sizes attributes on HTML video <source> elements, this issue proposes additional support for srcset posterset and sizes attributes on the <video> element itself as well as individual posterset attributes on html <source> elements.

Use case:

While thanks to the techniques introduced by the RICG it is perfectly possible to present to the user agent a bunch of <img> source options to pick from, the same is not possible for a <video> element's poster image. That in turn either leads to a longer than needed loading time and a waste of resources, or to a quickly loading but blurry video poster image. If the video presents itself as the hero element, like on a video heavy site similar to YouTube, this totally ruins the LCP metric (or the visual appearance).

The combination of posterset and sizes attributes on the <video> element and a posterset attribute on <source> elements, working analogue to <picture>/<img>'s srcset and sizes attributes, would remedy that.

And finally, a srcset attribute on the <video> element could cover the easier use cases described in #9446 that otherwise would not require separate <source> elements (e.g. when there's just one file format available).

Related:

• video source media attribute issue (Closed) HTML Video Element: Proposal For Reintroduction of Media in Source Elements #6363
• video source media attribute PR (Merged) Re-add for media elements #9341
• video source srcset and sizes attributes issue (HTML Video Element: Proposal For Support for Srcset and Sizes attributes on source elements #9446)

[annevk]

cc @whatwg/media

[zcorpan]

Using a child img element as the video's poster image would enable srcset+sizes (and other features of img) for the poster image, see #6636 (comment)