HTML Video Sources Should Be Responsive
Recently, I was adding a video to a website. Intuitively, I started to mark up the HTML <video>'s <source> elements with media attributes to specify the viewport sizes that each of my video source files would best serve. As I was working, I vaguely recalled discussions years ago that made me question: “wait, is media support available for video?” A quick check over at MDN confirmed that indeed it was… NOT. Support was removed from browsers and the spec despite having no HTML-based alternatives to take its place (thankfully, Webkit browsers still support it, so at least some browser support does exist, but WebKit alone is not enough).
Removing media support from HTML video was a mistake. It means that for every video we embed in HTML, we’re stuck with the choice of serving source files that are potentially too large or small for many users’ devices (resulting in poor performance, wasteful data consumption, and even sub-optimal quality on larger screens), or resorting to more complicated server-side or scripted or third-party solutions to deliver a correct size. According to the HTTP Archive, video delivery size is actually heavier on mobile devices (1897.3 KB) than desktop devices (1592.1 KB). We need better and simpler tools to deliver video responsively.
Read the Explainer
Permalink to 'Read the Explainer'It should be as easy to include responsibly-sized, responsive, contextually-sized videos in a page as it is with images–using media queries, and ideally srcset and sizes attributes as well. In an effort to start discussion around this change, I’ve created the following explainer repo over on Github. It summarizes the problems caused by HTML’s lack of support for offering multiple video source sizes, and how that problem impacts users, authors, and site owners.
HTML Video Element: Proposal For Reintroduction of Media (and srcset/sizes) in Source Elements
Please feel free to add issues to the tracker with comments or relevant questions, and share this widely. Thanks!