Skip to content
FrameworkStyle

NativeHlsVideo

HLS video element using the browser's built-in HLS support

HLS video element that relies on the browser’s native HLS support. Works on Safari and other browsers with built-in HLS playback. For cross-browser HLS support, use HlsVideo instead.

Examples

Basic Usage 

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

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

API Reference

Host Properties

Property Type Default Details
engine null —
error MediaError | null —
liveEdgeStart number —
preload PreloadType 'metadata'
src string ''
streamType MediaStreamType 'unknown'
targetLiveWindow number —

Attributes

Renders a native <video> element and accepts these media attributes as React props. The standard ones behave as described in the MDN media attributes reference: autopictureinpictureautoPlaycontrolscontrolslistcrossOrigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysInlineposterpreloadsrcstream-type

Events

Handle these media events with React event props (e.g. onPlay, onTimeUpdate). See media events: abortcanplaycanplaythroughdurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeresizeseekedseekingstalledsuspendtimeupdatevolumechangewaiting

These media events have no React prop — attach a listener through a ref with addEventListener: addtrackchangeenterpictureinpictureleavepictureinpictureremovetrack

Beyond the media events above, this element emits:

Event Description
streamtypechange Fired when the detected stream type changes. Read `streamType` for the new value.
targetlivewindowchange Fired when the target live window changes. Read `targetLiveWindow` for the new value.

These events have no built-in React prop. Attach a listener to the element through a ref with addEventListener.

Methods

Supports these methods from the native media API. See HTMLMediaElement for the core methods: addTextTrackcanPlayTypeexitFullscreenexitPictureInPictureloadpauseplayrequestFullscreenrequestPictureInPicture

In React, call these through a ref to the element.

CSS Custom Properties

Variable Details
--media-video-border-radius
--media-object-fit
--media-object-position
--media-caption-track-duration
--media-caption-track-delay
--media-caption-track-y