Description
What problem are you trying to solve?
Right now, there's no native way to define a playlist of <audio> or <video> files using just HTML. If you want a simple media queue — like a list of songs, podcast or episodes — you have to reimplement the logic entirely in JavaScript. That includes:
- Detecting when media ends and loading the next item
- Swapping out
<source>and<track>elements manually - Managing posters, titles, and current item metadata
- Hooking into
MediaSessionAPI for previous/next buttons - Supporting basic repeat/shuffle logic
- Updating UI accordingly
This creates a lot of boilerplate even for very simple use cases where media is static and known ahead of time. There’s also no built-in support for declaring a media queue declaratively in the markup.
What solutions exist today?
Today, the only way to implement media playlists is through JavaScript. Authors must:
- Create a list of items manually in code
- Load each source via DOM manipulation
- Manually manage subtitles (
<track>), posters, and titles per item - Set up custom events to track
ended, etc. - Integrate with the MediaSession API manually if they want hardware/media keys or OS integrations to work
There’s no built-in HTML element or pattern for sequencing audio/video playback.
How would you solve it?
Introduce a new declarative construct that allows authors to define a sequence of media files, each with its own <source>, <track>, and optional poster + title. This could be implemented in a few ways:
Option A: A new <playlist> element
This element would contain <item> children, and each <item> would define a playable media unit:
<video controls playlist="myList"></video>
<playlist id="myList">
<item poster="poster1.jpg" title="dog">
<!-- each <item> can take the same stuff as audio & video can hold -->
<source src="video1.mp4" type="video/mp4">
<track kind="subtitles" src="video1.vtt" srclang="en">
</item>
<item poster="poster2.jpg" title="cat">
<source src="video2.mp4" type="video/mp4">
<track kind="subtitles" src="video2.vtt" srclang="en">
</item>
</playlist>or just include it directly inside
<audio>
<playlist> ... </playlist
</audio>The <video> or <audio> element would play through the queue automatically. This would work much like how <track> and <source> are used today, but expanded to multiple items.
MediaSession integration
When a media playlist is defined natively, the browser could also automatically populate the MediaSession metadata and enable hardware/software media controls like "previous" and "next" without manually creating action handler
The default behavior could be to play items in order, with loop, shuffle, and basic JS API support (e.g., .playlist.next()) available for more advanced use cases.
Anything else?
- This feature would make it significantly easier to create playlists for music, podcast, lecture videos, etc., with zero or minimal scripting.
- The proposed functionality mirrors real-world usage that already happens with JavaScript in countless web apps.
- By aligning with existing semantics of
<source>and<track>, and extending them into a structured list - Accessibility tools would benefit from better metadata and sequencing cues if the playlist is native.
- Native playlist handling would make media behavior more predictable and consistent across browsers and devices.
- the default UI player would then get a prev/next play button at the very least