It is created using custom elements, allowing you to add or remove controls using simple HTML markup. You can also style the controls using CSS, giving you complete control over the look and feel of your media player.
It is also framework-agnostic, meaning it works seamlessly with any web framework, such as React, Vue, Angular, and more.
1. Install and import the media-chrome.
# NPM $ npm install media-chrome import 'media-chrome';
<!-- Browser --> <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1/+esm"></script>
2. Create a custom media player using the following Custom Elements (web components).
<media-controller style="aspect-ratio: 16/9">
<video slot="media" src="video.mp4" crossOrigin playsInline>
<track label="English" kind="captions" srcLang="en" src="captions.vtt"></track>
<track label="thumbnails" default kind="metadata" src="thumbnails.vtt"></track>
</video>
<media-control-bar>
<media-play-button></media-play-button>
<media-seek-forward-button seek-offset="15"></media-seek-forward-button>
<media-seek-backward-button seek-offset="15"></media-seek-backward-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-time-display></media-time-display>
<media-captions-button></media-captions-button>
<media-playback-rate-button></media-playback-rate-button>
<media-pip-button></media-pip-button>
<media-fullscreen-button></media-fullscreen-button>
<media-current-time-display media-current-time="120.0"></media-current-time-display>
<media-duration-display media-duration="120.0"></media-duration-display>
<media-live-button media-time-is-live></media-live-button>
<media-loading-indicator is-loading></media-loading-indicator>
<media-pip-button media-is-pip></media-pip-button>
<media-poster-image src="1.jpg" placeholder-src="1.jpg"></media-poster-image>
<media-preview-thumbnail media-preview-image="1.jpg" media-preview-coords="284 640 284 160"></media-preview-thumbnail>
</media-control-bar>
</media-controller> <!-- Audio -->
<media-controller audio>
<audio
slot="media"
src="/path/to/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> 3. Not only HTML5 videos, the web component also supports a wide range of video elements:
<media-controller>
<cloudflare-video
src="/path/to/video/"
slot="media"
crossorigin
muted
></cloudflare-video>
<media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
<media-control-bar>
...
</media-control-bar>
</media-controller> v4.10.0 (05/14/2025)
v4.9.1 (05/02/2025)
v4.9.0 (03/29/2025)
v4.8.0 (03/01/2025)
v4.7.0 (03/01/2025)
v4.6.1 (02/27/2025)
v4.6.0 (02/25/2025)
v4.5.0 (02/13/2025)
v4.4.0 (01/29/2025)
v4.3.1 (01/23/2025)
v4.3.0 (12/05/2024)
v4.2.3 (11/06/2024)
v4.2.2 (10/24/2024)
v4.2.1 (10/11/2024)
v4.2.0 (10/08/2024)
v4.1.5 (10/03/2024)
v4.1.4 (10/01/2024)
v4.1.3 (09/24/2024)
v4.1.1 (09/20/2024)
v4.1.0 (08/17/2024)
v4.0.0 (08/15/2024)
v3.2.5 (07/25/2024)
v3.2.4 (07/11/2024)
v3.2.3 (05/24/2024)
v3.2.2 (05/03/2024)
v3.2.1 (04/12/2024)
v3.2.0 (03/25/2024)
v3.1.1 (03/18/2024)
v3.1,0 (03/18/2024)
v3.0.2 (03/11/2024)
v3.0.1 (03/07/2024)
v3.0.0 (03/60/2024)
v2.2.5 (02/15/2024)
v2.2.4 (02/14/2024)
v2.2.3 (02/13/2024)
v2.2.2 (02/10/2024)
v2.2.0 (02/09/2024)
v2.1.0 (01/18/2024)
v2.0.1 (12/11/2023)
v2.0.0 (12/06/2023)
v1.7.0 (12/06/2023)
v1.6.0 (12/04/2023)
v1.5.4 (11/29/2023)
v1.5.3 (11/15/2023)
v1.5.2 (11/04/2023)
v1.5.0 (10/30/2023)
v1.4.5 (10/28/2023)
v1.4.4 (10/17/2023)
v1.4.3 (10/16/2023)
v1.4.2 (09/18/2023)
v1.4.1 (08/22/2023)
v1.4.0 (08/21/2023)
v1.3.1 (08/21/2023)
v1.3.0 (08/21/2023)
v1.2.5 (08/17/2023)
v1.2.3 (08/11/2023)
v1.2.2 (08/05/2023)
v1.2.1 (08/02/2023)
v1.2.0 (07/28/2023)
v1.1.6 (07/26/2023)
v1.1.6 (07/26/2023)
v1.1.5 (07/18/2023)
v1.1.4 (07/12/2023)
v1.1.3 (06/29/2023)
v1.1.2 (06/26/2023)
v1.1.1 (06/26/2023)
v1.1.0 (06/13/2023)
v1.0.0 (06/12/2023)
v0.21.1 (05/31/2023)
v0.21.1 (05/07/2023)
v0.21.0 (04/18/2023)
v0.20.4 (04/06/2023)
v0.20.3 (03/31/2023)
v0.20.2 (03/31/2023)
v0.20.1 (03/28/2023)
v0.20.0 (03/27/2023)
v0.19.1 (03/20/2023)
The post Custom Media Player Controls Using Web Components – media-chrome appeared first on CSS Script.
Video game deals have been popping up all over the place lately. Alongside PlayStation’s big…
This is Lowpass by Janko Roettgers, a newsletter on the ever-evolving intersection of tech and…
Woot is offering steep discounts on many video games and accessories, some of which are…
HBO Max's password-sharing crackdown is going to get a lot bigger. During an earnings call…
Workday has announced major updates to its Contract Lifecycle Management solution, powered by Evisort. After acquiring…
Gong has launched Mission Andromeda—a major new release that also adds a new product to…
This website uses cookies.