Custom Media Player Controls Using Web Components – media-chrome

Category: Javascript , Recommended | July 11, 2024
Author:muxinc
Views Total:13 views
Official Page:Go to website
Last Update:July 11, 2024
License:MIT

Preview:

Custom Media Player Controls Using Web Components – media-chrome

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:

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

You Might Be Interested In:


Leave a Reply