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 like React, Vue, Angular, and more.

Basic usage:

1. Install and import the media-chrome.

<script type="module">
  import mediaChrome from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>

2. Create a custom media player using the following Custom Elements (web components).

• <media-controller>
• <media-control-bar>
• <media-play-button>
• <media-forward-button>
• <media-backward-button>
• <media-mute-button>
• <media-volume-range>
• <media-time-range>
• <media-thumbnail-preview>
• <media-time-display>
• <media-captions-button>
• <media-playback-rate-button>
• <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-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>

3. Available props for the <media-control-bar>.

• autohide: auto hide after x seconds
• gestures-disabled: disable gestures
• nohotkeys: turn off all keyboard shortcuts.
• hotkeys: noarrowleft, noarrowright, etc.
• default-stream-type: live or on-demand
• audio: enable Audio UI
• noautoseektolive: don’t seek to the most current time (or live edge) in the live stream
• fullscreen-element: specify a different element for fullscreen UI
• liveedgeoffset: default 10 seconds

<media-controller autohide="2" gestures-disabled nohotkeys hotkeys="noarrowleft noarrowright" default-stream-type="live" audio noautoseektolive fullscreen-element="wrapper" liveedgeoffset="5">
  ...
</media-controller>

Changelog:

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