MuxVideo

Video element for Mux-hosted HLS streams

Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.

Examples

Basic Usage

import { MuxVideo } from '@videojs/react/media/mux-video';

export default function BasicUsage() {
  return (
    <MuxVideo
      className="mux-video"
      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
      autoPlay
      muted
      playsInline
      loop
      crossOrigin="anonymous"
    />
  );
}

.mux-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

<media-container class="media-container">
    <mux-video
        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
        autoplay
        muted
        playsinline
        loop
        crossorigin="anonymous"
    ></mux-video>
</media-container>

.media-container {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

import '@videojs/html/media/container';
import '@videojs/html/media/mux-video';

API Reference

Props

Accepts the standard React props for a native <video>, plus these Video.js-specific props:

Prop	Type	Default
`config`	`HlsMediaConfig`	`{}`
Description Playback configuration: a preferred playback path, an explicit content type, and options forwarded to hls.js. Reassigning reloads the engine when an engine-relevant option changes.
`preload`	`PreloadType`	`'metadata'`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`source`	`MuxSource \| null`	`null`
Description Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token.
`src`	`string`	`''`
Description Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs pass through unchanged.
`storyboard`	`string`	`''`
Description Storyboard (thumbnail sprite) VTT URL. Falls back to one derived from `source`.
`streamType`	`StreamType`	`'unknown'`
Description Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
`thumbnail`	`string`	`''`
Description Thumbnail image URL. Falls back to one derived from `source`.

Ref

Forwards its ref to the rendered <video>. The ref is an HTMLVideoElement and exposes its complete native property and method API.

Events

Handle standard media events with React event props such as onPlay and onTimeUpdate. For native events without a React prop, attach a listener through the ref with addEventListener.