Media Chrome will work with any element that exposes the same API as the
HTML media elements (
<audio>). This means that you can replace
these elements with your own if they conform to the same API.
You can read more about the
HTMLMediaElement API on MDN.
Media SlotSection titled Media Slot
The simplest media slot is the browser’s native
<video> tag. For example:
<media-controller> <video slot="media" src="https://....mp4" > </media-controller>
In this example, Media controller will:
- Listen for events emitted from the
- Understand the current state of the
<video>element by using the known props
- Call methods on the
Minimal media elementSection titled Minimal media element
The slotted media element is not required to support the complete
Each Media Chrome component requires different API’s, for example to get the play
button working the media element requirements might be:
- Provide a
- Provide a
Here’s an example of how such a custom media element could look like:
Custom media elementSection titled Custom media element
If you’d like to add some extra behavior to the native
have a look at custom-media-element.
HTMLVideoElement API will be automatically added to any custom element that
hls-video-element is a good example making use of this library.
Compatible media elementsSection titled Compatible media elements
Here are some of the custom media elements that have been built that are compatible with Media Chrome.
<cloudflare-video>Play videos hosted by Cloudflare
<dash-video>Play arbitrary DASH videos with Dash.js
<hls-video>Play arbitrary HLS videos with Hls.js
<jwplayer-video>Play videos that are hosted on JW Player
<mux-video>Play videos hosted by Mux
<shaka-video>Play videos with Shaka Player playback engine
<spotify-audio>Play audio hosted by Spotify
<videojs-video>Play videos with the Video.js playback engine
<vimeo-video>Play videos that are hosted on Vimeo
<wistia-video>Play videos that are hosted on Wistia
<youtube-video>Play videos that are hosted on YouTube