HlsVideo

The lightweight HLS video element, optimized for minimal bundle size. The hls.js video component is the larger, more compatible alternative.

Import

import { HlsVideo } from '@videojs/react/media/hls-video';

Examples

Basic Usage

import { HlsVideo } from '@videojs/react/media/hls-video';

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

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

Cookie-gated streams

A stream on another origin that is gated by cookies — CloudFront signed cookies, for example — needs those cookies on every manifest and segment request, or the CDN answers 403. Set the standard crossorigin="use-credentials" on the element and the engine sends them, the same way the browser does under native playback. Any other value, or no attribute, leaves requests at the platform default and sends no cross-origin cookies.

The CDN must answer with Access-Control-Allow-Credentials: true and a specific Access-Control-Allow-Origin, not *, or the browser refuses the credentialed response.

<HlsVideo src="https://cdn.example.com/stream.m3u8" crossOrigin="use-credentials" />