Awesome

media-group

Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple audio / video elements.

⚠️ This library is designed as a polyfill but note that MediaController is renamed to MediaGroupController and the mediagroup attribute is renamed to just group to avoid any issues with Safari where the original API is still implemented (while not working properly).

Example (CodeSandbox)

<script type="module" src="https://cdn.jsdelivr.net/npm/media-group"></script>

<video
  group="madmax"
  src="https://stream.mux.com/ibw0201Usmvp9fcDyXRzGwCu01IZXiT5duks8OoO3OQ01e00/low.mp4"
  controls
  playsinline
  muted
></video>

<audio
  group="madmax"
  src="https://stream.mux.com/0201RDkkUbY3501qR9fYuqOd8UXQNNyO3JLNcMG9kW4rpA/audio.m4a"
  controls
  playsinline
></audio>

Related

• Media Chrome Your media player's dancing suit. 🕺
• <mux-video> A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
• <mux-player> The official Mux-flavored video player web component.
• <youtube-video> A web component for the YouTube player.
• <vimeo-video> A web component for the Vimeo player.
• <videojs-video> A web component for Video.js.
• <wistia-video> A web component for the Wistia player.
• <jwplayer-video> A web component for the JW player.
• <hls-video> A web component for playing HTTP Live Streaming (HLS) videos.
• castable-video Cast your video element to the big screen with ease!