Enable Responsive Images and Alternative Text for HTML Video Poster Images

[scottjehl]

This proposal follows "Approach 1" in #10378 to:

• Add a new HTML video element posterfromimg attribute, opting a video element into allowing a child img element to govern poster image selection when present
• Allow a child img to optionally have a picture element parent for art-directed source control for responsive video sources
• Introduce an accessible text description for video poster images via the img element's alt attribute
• Add a new video element currentPoster property representing the current selected poster image source

---

• At least two implementers are interested (and none opposed):
  • Webkit: no declared position
  • Mozilla: no declared position
• Tests are written and can be reviewed and commented upon at:
  • …
• Implementation bugs are filed:
  • Chromium: …
  • Gecko: …
  • WebKit: …
  • Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
  • Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …
• Corresponding HTML AAM & ARIA in HTML issues & PRs:
• MDN issue is filed: …
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

/media.html ( diff )

[scottjehl]

Thanks for reviewing. We can follow up with WPTs soon.

Some questions for reviewers.

• For lazy loading poster images (ie with video[loading=lazy]), we specified that the video's bounding box must be used for the intersection observer, and not a child posterfromimg img element, because that img element is not to be rendered and can't intersect with the viewport. This introduces a potential complication in how the lazy intersection observers are bound currently so we wanted to see if it makes sense.
• Similarly, we anticipated a potential edge case when posterfromimg is in use with an img that has sizes="auto" and included instructions again for using the video element's bounding box ("concrete object size" appeared to be the proper term) when evaluating that img's computed sizes value. We were unsure if this will be too complicated for implementers, since it might involve changes to the img sizes algorithm when the img is inside a video element, but it'd be ideal if sizes=auto worked as expected here so we gave it a shot.
• When the loading attribute is present on the video's child img element, it takes priority for the poster's loading eagerness over whatever the parent element specifies. When it is not present on the img element, poster loading eagerness will defer to the video element's instructions (lazy or not depending on the loading value or presence). We wanted to make note of this because browsers' preload scanners may need to qualify their early fetch of img elements sources to those not inside a video[loading=lazy] element.