<mux-video>

https://github.com/muxinc/elements/tree/main/packages/mux-video

A custom element for playing Mux videos.

<media-controller>
  <mux-video
    playback-id="A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg"
    slot="media"
    crossorigin
    muted
  ></mux-video>
  <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button ></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
    <media-time-range></media-time-range>
    <media-time-display showduration remaining></media-time-display>
    <media-playback-rate-button></media-playback-rate-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

Open Sandbox

Installing

First install the NPM package:

npm install @mux/mux-video

Import in your app javascript (e.g. src/App.js):

import '@mux/mux-video';

Optionally, you can load the script directly from a CDN using jsDelivr:

<script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video@0.19/+esm"></script>

This will register the custom elements with the browser so they can be used as HTML.