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, Audios, 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-seek-forward-button>
• <media-seek-backward-button>
• <media-mute-button>
• <media-volume-range>
• <media-time-range>
• <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:

v0.20.0 (03/27/2023)

• Bugfix
• Add Minimal theme

v0.19.1 (03/20/2023)

• rename Micro to Microvideo