By Scott Jehl

Recently in the Web Performance Slack group, there was some discussion around Responsive Video and what else it is lacking, now that it works at a baseline level.

I thought I'd write a quick post that lists a few features that are on my wishlist and include relevant links to WhatWG issues where you might lend your feedback!

• Responsive Poster Images: Now that we can offer multiple sources for a video, having one poster image source per video is a major shortcoming. For the simplest resolution switching use cases, it would be best for performance to have ways to deliver different image sizes depending on a device's needs, so something like srcset and sizes comes to mind as a potential option, or even just allowing a poster attribute on source elements in addition to the video element. That said, while the majority of responsive image usage today may be for delivering different video resolutions, the media attribute allows us to target much more, such as pixel density, or landscape and portrait formats to serve users based on which decade they were born the orientation of a device's viewport. With all of the possible needs we may have, simply allowing a child picture element to act as a video element's poster might be ideal. Here's an issue where that is proposed: HTML Video: Allow a child Picture Element to Control the Video Poster Image
• Post-Pageload Responsiveness One thing that surprises folks about responsive video is that it's only responsive when the video first loads, unlike the picture element's behavior which reevaluates sources when media changes (on resize for example!). Not only is this unexpected, but it could be problematic when certain video sources are expected to be delivered at different viewport sizes and they aren't (again, the orientation aspect ratio example comes to mind). I recently blogged about a web component that instructs the browser to be more responsive with video, reevaluating media when it changes, and time code syncing so a video can resume playing where it was when a source swaps. I used that component as a proof of concept to attach to this issue: Specify That Responsive Video Elements Re-Evaluate Sources on Media Change, Like Picture
• Lazy Behavior for Autoplay, Poster, and more: It would be great if the video element had lazy loading. I think it would be even greater if the now-familiar loading="lazy" worked on video elements and controlled a few relevant properties. For example, if loading="lazy" was combined with autoplay, maybe the autoplay feature could only apply when the video enters the viewport? Additionally, with that attribute in place, it'd be great if the poster image loaded lazily too, (admittedly, a child picture element could handle that part too). Also, it'd be nice if loading="lazy" caused a video to delay its preloading behavior, waiting to load video data until the video is actually going to be used. Here's an issue for that: Video loading=lazy attribute support
• Srcset and Sizes for Video: The video element and its source elements only support the src attribute, unlike img and the picture element's source elements which support srcset and sizes. Support for srcset and sizes attributes would allow developers to deliver video based on conditions the browser knows best. It would offer a resolution based delivery for cases where art direction is less important. HTML Video and its Source Elements Should Support SRCSET and SIZES

I'd love to see some community feedback on any or all of these. Thanks for reading!