Use case(s) for expanded capabilities of the <video> element.

new-video-capabilities.md

People have asked for extended capabilities of HTML videos, this Gist is used to showcase a somewhat niched use case that incorporates theoretical capabilities as suggested in the issues raised by others, as mentioned below.

Use case:
Autoplay a background-video only on screens larger than 1000px (where the user hasn't set a preference to reduce motion), if the user prefers reduced motion and/or is on a smaller device then show the poster image instead.

<!-- 1) -->
<video autoplay muted playsinline>
  <!-- 2) -->
  <source src="video.webm" type="video/webm" media="screen and (min-width: 1000px) and (prefers-reduced-motion: no-preference)">
  <!-- 3) -->
  <poster src="poster.webp" type="image/webp" media="not all and (min-width: 1000px), not all and (prefers-reduced-motion: no-preference)" alt="{alt text for poster image}">
</<video>

1. (FWIW) These attributes are used to satisfy browser policies for autoplaying videos.
2. Allow media attribute for <video> in whatwg/html#4544.
3. New <poster> element enables:
     • Poster image delivery based on media query conditions.
     • alt text (resolves w3c/html#1431).
     • Responsive poster images using srcset & sizes (resolves ResponsiveImagesCG/picture-element#258).

@zcorpan If you don't mind, what is your initial thought of this?

If art direction for video makes sense, I suppose it makes sense to have the same art direction for the poster image. However, how to best do that is not clear to me. Reusing picture somehow could make sense. Maybe open a new whatwg/html issue for that? Also separate issue for alt if there isn't one.

Also, see https://whatwg.org/faq#adding-new-features - please focus on steps 1, 2 and 3 first 🙂

I'll give it some more thought before opening one or more issues, which would involve reviving the W3C HTML one. Thanks!