media-chrome
Advanced tools
Custom elements (web components) for making audio and video player controls that look great in your website or app.
The media-chrome npm package provides a set of customizable web components for building media player controls. It allows developers to create custom media player interfaces with ease, leveraging the power of Web Components.
Custom Play Button
This feature allows you to add a custom play button to your media player. The <media-play-button> component can be styled and customized to fit the design of your media player.
<media-play-button></media-play-button>Custom Volume Control
This feature provides a custom volume control slider. The <media-volume-range> component can be used to adjust the volume of the media player and can be styled to match your player’s design.
<media-volume-range></media-volume-range>Custom Seek Bar
This feature allows you to add a custom seek bar to your media player. The <media-seek-bar> component enables users to navigate through the media content and can be customized to fit the player’s design.
<media-seek-bar></media-seek-bar>Custom Fullscreen Button
This feature provides a custom fullscreen button. The <media-fullscreen-button> component can be used to toggle fullscreen mode for the media player and can be styled to match the player’s design.
<media-fullscreen-button></media-fullscreen-button>Video.js is a popular open-source HTML5 video player that provides a wide range of features and plugins for customizing the video player interface. It offers a robust API and supports various media formats and streaming protocols. Compared to media-chrome, Video.js is more feature-rich and has a larger community, but it may be more complex to customize.
Plyr is a simple, lightweight, and accessible HTML5 media player. It supports video, audio, and YouTube/Vimeo embeds. Plyr provides a clean and modern interface with easy customization options. Compared to media-chrome, Plyr is more lightweight and easier to set up, but it may not offer as much flexibility in terms of custom components.
MediaElement.js is a JavaScript library that provides a consistent HTML5 media player interface across all browsers. It supports both audio and video playback and offers a range of plugins for additional functionality. Compared to media-chrome, MediaElement.js focuses on cross-browser compatibility and provides a more traditional approach to media player customization.
Your media player's dancing suit. :man_dancing:
Fully customizable media player controls using web components (native custom elements).
<video> and <audio> elements and a lot of players (YouTube, HLS.js, and more)From Mux and the creator of Video.js.
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.
See all of the repo examples in action.
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+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@4/+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>
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.
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:
<video>. (Could even be used by players as their own built-in controls)FAQs
Custom elements (web components) for making audio and video player controls that look great in your website or app.
We found that media-chrome demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.