Skip to content

ReferenceMedia

HlsVideo

Lightweight HLS video element with minimal bundle size

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 />;
}

API Reference

Props

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

PropTypeDefaultDetails
disableRemotePlaybackbooleanfalse
preload'' | 'none' | 'metadata' | 'auto'''
sourceobjectnull
srcstring''
streamType'on-demand' | 'live' | 'unknown''unknown'

Refs

ref

Forwards to the rendered <video>, an HTMLVideoElement with its complete native property and method API.

const ref = useRef<HTMLVideoElement>(null);

<HlsVideo ref={ref} />

mediaRef

Receives the same HTMLVideoElement as ref. Embed components hand their playback adapter to mediaRef instead, so code that works with several media components can read the playback object from one prop. 

const mediaRef = useRef<HTMLVideoElement>(null);

<HlsVideo mediaRef={mediaRef} />

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.