HlsJsVideo

API Reference

Props

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

Engine options

source.engine.hlsJs

Pass hls.js’s own configuration here. It’s handed to hls.js untouched, so every option in its config reference works, spelled the way hls.js spells it. Media Sources covers how engine options fit into a structured source.

The names and types below come from hls.js’s own type definitions, so they tell you what exists and what shape it takes. hls.js documents what each one does; the descriptions are theirs to write, and most are blank here because its types carry none.

<HlsJsVideo
  source={{
    src: 'https://example.com/playlist.m3u8',
    engine: { hlsJs: { maxBufferLength: 30, lowLatencyMode: true } },
  }}
/>

const video = document.querySelector('hlsjs-video');
video.source = {
  src: 'https://example.com/playlist.m3u8',
  engine: { hlsJs: { maxBufferLength: 30, lowLatencyMode: true } },
};

source.engine.nativeHls

When playback falls back to the browser’s own HLS, hls.js isn’t involved and its options don’t apply. This configures that path instead.

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.