HlsVideo

Lightweight HLS video element with minimal bundle size

The default HLS video element, optimized for minimal bundle size. HlsJsVideo 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;
}

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

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

import '@videojs/html/ui/container';
import '@videojs/html/media/hls-video';

API Reference

Props

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

Prop	Type	Default
`disableRemotePlayback`	`boolean`	`false`
`preload`	`'' \| 'none' \| 'metadata' \| 'auto'`	`''`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`src`	`string`	`''`
`streamType`	`MediaStreamType`	`"unknown"`
Description The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value.

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.