Your media player's dancing suit. 🕺
Fully customizable media player controls using web components (native custom elements).
- [x] Compatible with the
<audio>elements and a lot of players (YouTube, HLS.js, and more)
- [x] Simple HTML to add/remove controls
- [x] Simple CSS to style the controls
Visit the official documentation for Media Chrome for the latest up-to-date usage instructions.
You can find the documentation for v0.x of media-chrome here.
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1/+esm"></script> <media-controller> <video slot="media" src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4" crossorigin > <track label="thumbnails" default kind="metadata" src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt" /> </video> <media-control-bar> <media-play-button></media-play-button> <media-mute-button></media-mute-button> <media-volume-range></media-volume-range> <media-time-range></media-time-range> <media-pip-button></media-pip-button> <media-fullscreen-button></media-fullscreen-button> </media-control-bar> </media-controller>
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1/+esm"></script> <media-controller audio> <audio slot="media" src="https://stream.mux.com/O4h5z00885HEucNNa1rV02wZapcGp01FXXoJd35AHmGX7g/audio.m4a" ></audio> <media-control-bar> <media-play-button></media-play-button> <media-time-display showduration></media-time-display> <media-time-range></media-time-range> <media-playback-rate-button></media-playback-rate-button> <media-mute-button></media-mute-button> <media-volume-range></media-volume-range> </media-control-bar> </media-controller>
Use with React
While you technically can use Media Chrome elements directly with React, it can sometimes be a bit clunky to work with Web Components in React, and some things just don't feel idiomatic to the framework (for example: having to use
class= instead of
className=, see React's official docs regarding web components for more details). To help with this, we've published some React wrapper components for all of our core Elements. You can read up on using them here.
More often than not web designers and developers just use the default media player controls, even when creating a beautiful custom design theme. It's hard not to.
- Web browsers have built-in media controls that can't easily be customized and look different in every browser.
- Social sites like Youtube, Vimeo, and SoundCloud only let you customize small details of the player, like primary button color.
It should be easier...
<media-chrome> is an attempt at solving that.
Web components. @heff spoke about the potential of web components for video at Demuxed 2015, and again in 2020. They allow us to extend the browser's base HTML functionality, meaning we can now build media player controls as simple HTML tags that:
- Can be used across players when using multiple in the same site, e.g Youtube &
<video>. (Could even be used by players as their own built-in controls)