<video> element: proposal to add a dedicated native button for source selection

[JulienWilhelm]

Hello !

Background: I'm working on reducing the environmental impacts of websites and web applications. In 2025, there's a lot we can do to contextualize the resources served to the user (format, size, lazy loading, etc.). But we could easily go even further.

Introduction

Reminder of what can be done today for native video with HTML5:

<video preload="none" poster="/path/to/poster.webp" controls>
	<source src="/path/to/1080p.webm" type="video/webm" media="(min-height: 1080px) and (min-width:1920px)">
	<source src="/path/to/1080p.m4v" type="video/mp4" media="(min-height: 1080px) and (min-width:1920px)">
	<source src="/path/to/720p.webm" type="video/webm" media="(min-height: 720px) and (min-width:1280px)">
	<source src="/path/to/720p.m4v" type="video/mp4" media="(min-height: 720px) and (min-width:1280px)">
	<source src="/path/to/360p.webm" type="video/webm">
	<source src="/path/to/360p.m4v" type="video/mp4">
	<track kind="subtitles" label="Français" src="/path/to/subtitle-fr.vtt" srclang="fr" />
	<track kind="subtitles" label="English" src="/path/to/subtitle-en.vtt" srclang="en" />
</video>

In this example:

• The preload attribute blocks the preloading of the video, otherwise it will be loaded by default;
• The poster attribute defines a preview image (here, in WebP);
• The controls attribute allows the user to access the controls (playback, volume, etc.);
• The <track> elements list two subtitle tracks available on demand (fr, en).
• The <sources> elements list multiple streams to take into account the web browser's format support, as well as the user's screen resolution when the page loads (selected by the web browser).

That's nice. But!

Use Cases

What if the user wants to select a different video resolution than the one offered when the page initially loads?

There is no way to do this without JavaScript. And that's a problem, because you can't extend the native HTML5 player.

You either accept it as it is, or you have to code another one from scratch.

Unless?

Goals / Proposed Solution / Examples

Unless you have a dedicated source selection button for that native HTML player, of course!

If we take the code above, the browser knows that there are six options available for the same video. Why couldn't it list them in a dedicated button, just like the button dedicated to subtitle management does?

To help the browser render the correct information, creating an additional attribute for the <source> element seems inevitable. The purpose of this attribute is to provide information about the video definition.

For example, the modified code might look like this:

<video preload="none" poster="/path/to/poster.webp" controls>
	<source src="/path/to/1080p.webm" type="video/webm" media="(min-height: 1080px) and (min-width:1920px)" resolution="1080p">
	<source src="/path/to/1080p.m4v" type="video/mp4" media="(min-height: 1080px) and (min-width:1920px)" resolution="1080p">
	<source src="/path/to/720p.webm" type="video/webm" media="(min-height: 720px) and (min-width:1280px)" resolution="720p">
	<source src="/path/to/720p.m4v" type="video/mp4" media="(min-height: 720px) and (min-width:1280px)" resolution="720p">
	<source src="/path/to/360p.webm" type="video/webm" resolution="360p">
	<source src="/path/to/360p.m4v" type="video/mp4" resolution="360p">
	<track kind="subtitles" label="Français" src="/path/to/subtitle-fr.vtt" srclang="fr" />
	<track kind="subtitles" label="English" src="/path/to/subtitle-en.vtt" srclang="en" />
</video>

Thanks to the <resolution> attribute, the browser is now able to identify the resolution for each <source>.

With the <type> attribute, it can even list only one format or another.

• For example, if the browser supports WebM, only the three WebM sources will be listed.
• Otherwise, only the three MP4 sources will be listed.

It would be truly amazing to be able to do this so easily!

Privacy & Security Considerations

Unless I'm mistaken, this proposal is no more intrusive than automatically selecting a default media based on the dimensions of the user's viewport (media attribute).

So...Let's talk!