Custom Media Player Controls Using Web Components – media-chrome

Preview:

Description:

The media-chrome provides a set of web components to create custom media controls for Videos, Audio, and Live Streams.

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.

Basic usage:

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>
• <media-control-bar>
• <media-play-button>
• <media-seek-forward-button>
• <media-seek-backward-button>
• <media-mute-button>
• <media-volume-range>
• <media-time-range>
• <media-thumbnail-preview>
• <media-time-display>
• <media-captions-button>
• <media-captions-menu>
• <media-playback-rate-button>
• <media-playback-rate-menu>
• <media-pip-button>
• <media-fullscreen-button>
• <media-airplay-button>
• <media-cast-button>
• <media-current-time-display>
• <media-duration-display>
• <media-live-button>
• <media-loading-indicator>
• <media-pip-button>
• <media-poster-image>
• <media-preview-thumbnail>
• <media-chrome-dialog>
• <media-audio-track-menu-button>
• <media-rendition-menu>
• <media-settings-menu>

<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:

• <cloudflare-video>
• <dash-video>
• <hls-video>
• <jwplayer-video>
• <mux-video>
• <shaka-video>
• <spotify-audio>
• <videojs-video>
• <vimeo-video>
• <wistia-video>
• <youtube-video>

<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>

Changelog:

v4.8.0 (03/01/2025)

• persist muted enabled state

v4.7.0 (03/01/2025)

• show Auto(mediaHeight) in rendition menu
• bugfix

v4.6.1 (02/27/2025)

• Fixed dialog accessibility hidden, page load bug

v4.6.0 (02/25/2025)

• Refactor to use ce-la-react to add type definitions for JSX attributes
• Bugfixes

v4.5.0 (02/13/2025)

• hide error dialog on playback recovery
• add range thumb slot

v4.4.0 (01/29/2025)

• CSS vars to customize hide transition
• Bugfixes

v4.3.1 (01/23/2025)

• revert theme render flicker (breakpoints)

v4.3.0 (12/05/2024)

• add media-error-dialog

v4.2.3 (11/06/2024)

• Fixed tooltip overflow causing scrollbar

v4.2.2 (10/24/2024)

• Fixed iOS volume support

v4.2.1 (10/11/2024)

• Bugfixes

v4.2.0 (10/08/2024)

• add range CSS parts
• Bugfixes

v4.1.5 (10/03/2024)

• Bug Fixes

v4.1.4 (10/01/2024)

• Bug Fixes

v4.1.3 (09/24/2024)

• Bug Fixes

v4.1.1 (09/20/2024)

• Bug Fixes

v4.1.0 (08/17/2024)

• Bug Fixes

v4.0.0 (08/15/2024)

• Bug Fixes

v3.2.5 (07/25/2024)

• Bug Fixes

v3.2.4 (07/11/2024)

• Bug Fixes

v3.2.3 (05/24/2024)

• Bug Fixes

v3.2.2 (05/03/2024)

• avoid dist artifacts in manifest generation

v3.2.1 (04/12/2024)

• Bug Fixes

v3.2.0 (03/25/2024)

• Bug Fixes

v3.1.1 (03/18/2024)

• Bug Fixes

v3.1,0 (03/18/2024)

• Bug Fixes
• configurable keyboard seek offsets

v3.0.2 (03/11/2024)

• Bug Fixes

v3.0.1 (03/07/2024)

• Bug Fixes

v3.0.0 (03/60/2024)

• Bug Fixes
• move menu components to stable
• shifting time box elements with arrow

v2.2.5 (02/15/2024)

• Bug Fixes

v2.2.4 (02/14/2024)

• Bug Fixes

v2.2.3 (02/13/2024)

• Bug Fixes

v2.2.2 (02/10/2024)

• Bug Fixes

v2.2.0 (02/09/2024)

• add media-chrome-dialog element
• add range preview chapters
• add settings-menu
• bugfix

v2.1.0 (01/18/2024)

• add role menu elements
• fix bugs

v2.0.1 (12/11/2023)

• prevent unset callback if there is no media

v2.0.0 (12/06/2023)

• use remote playback API

v1.7.0 (12/06/2023)

• Fixed: fullscreen attr if node is not isConnected
• add support for default duration when usable duration is unavailable

v1.6.0 (12/04/2023)

• Bug Fixes
• Add user prefs for subtitles+cc lang, including local storage.

v1.5.4 (11/29/2023)

• Bug Fixes

v1.5.3 (11/15/2023)

• Fixed: Android toggle controls on tapping

v1.5.2 (11/04/2023)

• bugfixes

v1.5.0 (10/30/2023)

• separate slider UI from input range + improve mobile

v1.4.5 (10/28/2023)

• Bugfixes

v1.4.4 (10/17/2023)

• Bugfixes

v1.4.3 (10/16/2023)

• Bugfixes

v1.4.2 (09/18/2023)

• Bugfixes

v1.4.1 (08/22/2023)

• Bugfixes

v1.4.0 (08/21/2023)

• add audio track selectmenu

v1.3.1 (08/21/2023)

• Bugfix

v1.3.0 (08/21/2023)

• add option-selected part for selected option elements

v1.2.5 (08/17/2023)

• Bugfix

v1.2.3 (08/11/2023)

• Bugfix

v1.2.2 (08/05/2023)

• Bugfix

v1.2.1 (08/02/2023)

• Bugfix

v1.2.0 (07/28/2023)

• Add rendition (quality) selector
• Add checkmark icon to listboxes
• Bugfixes

v1.1.6 (07/26/2023)

• Bugfix

v1.1.6 (07/26/2023)

• Bugfix

v1.1.5 (07/18/2023)

• Bugfix

v1.1.4 (07/12/2023)

• Bugfix

v1.1.3 (06/29/2023)

• Bugfix

v1.1.2 (06/26/2023)

• Bugfix

v1.1.1 (06/26/2023)

• Bugfix

v1.1.0 (06/13/2023)

• add backdrop-filter to range track & bg
• bugfix

v1.0.0 (06/12/2023)

• Icon slots have been renamed to “icon” for Airplay, Seek Forward, Seek Backward, and Loading Indicator controls.

v0.21.1 (05/31/2023)

• Icon slots have been renamed to “icon” for Airplay, Seek Forward, Seek Backward, and Loading Indicator controls.

v0.21.1 (05/07/2023)

• Bugfix
• add novolumepref attribute to prefer writing to localStorage

v0.21.0 (04/18/2023)

• Bugfix
• introduce a playback rates select menu
• remove deprecated, move experimental files

v0.20.4 (04/06/2023)

• Bugfix

v0.20.3 (03/31/2023)

• Bugfix

v0.20.2 (03/31/2023)

• Bugfix

v0.20.1 (03/28/2023)

• Bugfix

v0.20.0 (03/27/2023)

• Bugfix
• Add Minimal theme

v0.19.1 (03/20/2023)

• rename Micro to Microvideo