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)

1<script type="module" src="https://cdn.jsdelivr.net/npm/media-group"></script>
2
3<video
4  group="madmax"
5  src="https://stream.mux.com/ibw0201Usmvp9fcDyXRzGwCu01IZXiT5duks8OoO3OQ01e00/low.mp4"
6  controls
7  playsinline
8  muted
9></video>
10
11<audio
12  group="madmax"
13  src="https://stream.mux.com/0201RDkkUbY3501qR9fYuqOd8UXQNNyO3JLNcMG9kW4rpA/audio.m4a"
14  controls
15  playsinline
16></audio>

Related

• Media Chrome Your media player's dancing suit. 🕺
• <media-playlist> A custom element for playing through a set of audio and/or video elements.
• <hls-video> A web component for playing HTTP Live Streaming (HLS) videos.
• <youtube-video> A web component for the YouTube player.
• <vimeo-video> A web component for the Vimeo player.
• castable-video Cast your video element to the big screen with ease!
• <mux-player> The official Mux-flavored video player web component.
• <mux-video> A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.