mux-video

Video element for Mux-hosted HLS streams

Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.

Import

pnpm add @videojs/html @videojs/mux-video

import '@videojs/html/media/mux-video';

Or load it from the CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-beta.32/media/mux-video.js"></script>

Load a source

The source param builds the URL for you from a playback ID, an optional custom domain, and playback params. Playback params are just camelCased Mux playback query params; for example, max_resolution becomes maxResolution.

<MuxVideo
  source={{ 
    playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
    customDomain: 'media.example.com',
    playback: { maxResolution: '1080p' }
  }} 
/>

If for some reason you need a bit more control, you can use the src param with a plain ’ol URL, too:

<MuxVideo
  src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
/>

MuxVideo ignores the same source object when it is assigned again. A new object fires sourcechange even when its values are equal, although an equivalent playback source does not reload.

MuxVideo takes Mux content two ways: a stream URL through src, or a structured source object.

<mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-video>

The source object builds the URL for you from a playback ID, an optional custom domain, and playback params. Playback params are just camelCased Mux playback query params; for example, max_resolution becomes maxResolution.

const video = document.querySelector('mux-video')!;
video.source = {
  playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
  customDomain: 'media.example.com',
  playback: { maxResolution: '1080p' },
};

MuxVideo ignores the same source object when it is assigned again. A new object fires sourcechange even when its values are equal, although an equivalent playback source does not reload.

Posters and storyboards

MuxVideo derives a poster image and a storyboard from the playback ID. source.poster and source.storyboard configure the generated URLs.

When MuxVideo is inside a player, it supplies the poster for the skin to display. Set poster on the player when you want to use your own image instead.

MuxVideo injects the derived storyboard <track> automatically and removes it when the media detects a live stream. Configure the derived URLs through the source object:

const video = document.querySelector('mux-video')!;
video.source = {
  playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
  poster: { time: 2, width: 1280 },
  storyboard: { format: 'webp' },
};

For declarative HTML, poster-time="2" reflects to source.poster.time after the src attribute is parsed.

The storyboard lives on a Mux domain, so MuxVideo has to be CORS-enabled for that cross-origin <track> to load at all. Thumbnail then fetches the sprite sheets its cues point at the same way:

<mux-video
  src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
  crossorigin="anonymous"
></mux-video>

Signed playback

For signed playback, put the playback token on source.playback.token. The token replaces every other playback param, so bake modifiers like resolution and time bounds into the token when you sign it.

Signed playback needs a separate token for each image URL. Put the thumbnail token (aud: 't') at source.poster.token and the storyboard token (aud: 's') at source.storyboard.token. If either token is missing or has the wrong audience, MuxVideo does not generate the corresponding URL.

<MuxVideo
  source={{
    playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
    playback: { token: playbackToken },
    poster: { token: posterToken },
    storyboard: { token: storyboardToken },
  }}
/>

const video = document.querySelector('mux-video')!;
video.source = {
  playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
  playback: { token: playbackToken },
  poster: { token: posterToken },
  storyboard: { token: storyboardToken },
};

Analytics and casting

MuxVideo plays Mux streams. It doesn’t monitor them or cast them — Mux Data and Google Cast are separate extensions you add to the player alongside it. Mux Data needs no environment key here, since Mux attributes the views to the environment that owns the playback ID:

Add @videojs/mux-data to the installation before using the telemetry component below:

pnpm add @videojs/mux-data

import { createPlayer } from '@videojs/react';
import { GoogleCast } from '@videojs/react/extensions/google-cast';
import { MuxData } from '@videojs/react/extensions/mux-data';
import { MuxVideo } from '@videojs/react/media/mux-video';
import { videoFeatures } from '@videojs/react/video';

const { Player } = createPlayer({ features: videoFeatures });

export function MuxPlayer() {
  return (
    <Player>
      <MuxVideo source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM' }} playsInline />
      <MuxData playerSoftwareName="mux-video" />
      <GoogleCast />
    </Player>
  );
}

<script type="module">
  import '@videojs/html/video/player';
  import '@videojs/html/media/mux-video';
  import '@videojs/html/extensions/mux-data';
  import '@videojs/html/extensions/google-cast';
</script>

<video-player>
  <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" playsinline></mux-video>
  <mux-data player-software-name="mux-video"></mux-data>
  <google-cast></google-cast>
</video-player>

Mux Data

Metadata, options, and configuration

Cast to AirPlay and Chromecast

Receivers, load requests, and session state

Examples

Basic Usage

import { MuxVideo } from '@videojs/react/media/mux-video';

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

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

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

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

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

API Reference

Attributes

Forwards these standard media attributes to the internal <video>. See the MDN media element reference: autopictureinpictureautoplaycontrolscontrolslistcrossorigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysinlineposterpreloadsrc

These Video.js-specific attributes configure media behavior:

Attribute	Type	Default	Details
`stream-type`	`MediaStreamType`	`"unknown"`
Description Current stream type (`'on-demand'` / `'live'` / `'unknown'`).

Properties

Property	Type	Default
`audioRenditions`	`AudioRenditionListLike \| undefined`	`—`
Description Read-only. Selectable audio variants, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`audioTracks`	`AudioTrackListLike \| undefined`	`—`
Description Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`contentData`	`{ poster?: string; storyboard?: string }`	`—`
Description Read-only. Image URLs `source` describes rather than plays: `poster` from its `poster` params, `storyboard` from its `storyboard` params. A key is absent when the URL can't be built — no playback ID, or signed playback without a matching image token. Derived from `source` and nothing else. The same object is handed back until one of those URLs changes, and `contentdatachange` announces it when it does. Nothing here is applied for you, apart from the thumbnail track `<mux-video>` adds from `storyboard` (and drops for live streams).
`disableRemotePlayback`	`unknown`	`false`
Description Whether remote playback (AirPlay, Google Cast) is disabled for this media.
`engine`	`Hls \| null`	`—`
Description Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
`error`	`MediaError \| null`	`—`
Description Read-only.
`isFullscreen`	`boolean`	`—`
Description Read-only.
`isPictureInPicture`	`boolean`	`—`
Description Read-only.
`liveEdgeStart`	`number`	`—`
Description Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live.
`preload`	`MediaPreloadType`	`'metadata'`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`source`	`{ drm?: MuxDrmParams } \| null`	`null`
Description Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that do arrive adaptive selection reaches for. The two halves are independent.
`src`	`string`	`''`
Description Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs are kept as a plain `source.src`. Only playback options carry over. Mux identity comes from the URL, and the signed `poster`, `storyboard`, and `drm` tokens are scoped to a playback ID, so carrying them onto a different source would build rejected URLs.
`streamType`	`MediaStreamType`	`"unknown"`
Description Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
`targetLiveWindow`	`number`	`—`
Description Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate).
`videoRenditions`	`VideoRenditionListLike \| undefined`	`—`
Description Read-only. Selectable quality levels, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`videoTracks`	`VideoTrackListLike \| undefined`	`—`
Description Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`webkitCurrentPlaybackTargetIsWireless`	`boolean \| undefined`	`—`
Description Read-only.
`webkitPresentationMode`	`WebKitPresentationMode \| undefined`	`—`
Description Read-only.
`webkitSetPresentationMode`	`((mode: WebKitPresentationMode) => void) \| undefined`	`—`
Description Read-only.

Also exposes these properties from the native media API. See HTMLVideoElement for details: autoplaybufferedcontrolscrossOrigincurrentSrccurrentTimedefaultMuteddefaultPlaybackRatedisablePictureInPicturedurationendedloopmutedpausedplaybackRateplayedplaysInlineposterreadyStateremoteseekableseekingtextTrackstitlevideoHeightvideoWidthvolume

Engine options

`source.engine.hlsJs`

Options passed under source.engine.hlsJs.

Option	Type	Details
`abrBandWidthFactor`	`number \| undefined`
`abrBandWidthUpFactor`	`number \| undefined`
`abrController`	`typeof AbrController \| undefined`
`abrEwmaDefaultEstimate`	`number \| undefined`
Description Default bandwidth estimate in bits/s prior to collecting fragment bandwidth samples
`abrEwmaDefaultEstimateMax`	`number \| undefined`
`abrEwmaFastLive`	`number \| undefined`
`abrEwmaFastVoD`	`number \| undefined`
`abrEwmaSlowLive`	`number \| undefined`
`abrEwmaSlowVoD`	`number \| undefined`
`abrMaxWithRealBitrate`	`boolean \| undefined`
`appendErrorMaxRetry`	`number \| undefined`
`assetPlayerId`	`string \| undefined`
`audioPreference`	`AudioSelectionOption \| undefined`
`audioStreamController`	`typeof AudioStreamController \| undefined`
`audioTrackController`	`typeof AudioTrackController \| undefined`
`autoStartLoad`	`boolean \| undefined`
`backBufferLength`	`number \| undefined`
`bufferController`	`typeof BufferController \| undefined`
`capLevelController`	`typeof CapLevelController \| undefined`
`capLevelOnFPSDrop`	`boolean \| undefined`
`capLevelToPlayerSize`	`boolean \| undefined`
`captionsTextTrack1Label`	`string \| undefined`
`captionsTextTrack1LanguageCode`	`string \| undefined`
`captionsTextTrack2Label`	`string \| undefined`
`captionsTextTrack2LanguageCode`	`string \| undefined`
`captionsTextTrack3Label`	`string \| undefined`
`captionsTextTrack3LanguageCode`	`string \| undefined`
`captionsTextTrack4Label`	`string \| undefined`
`captionsTextTrack4LanguageCode`	`string \| undefined`
`certLoadPolicy`	`LoadPolicy \| undefined`
`cmcd`	`CMCDControllerConfig \| undefined`
`cmcdController`	`typeof CMCDController \| undefined`
`contentSteeringController`	`typeof ContentSteeringController \| un...`
Type `typeof ContentSteeringController \| undefined`
`cueHandler`	`CuesInterface \| undefined`
`debug`	`boolean \| ILogger \| undefined`
`defaultAudioCodec`	`string \| undefined`
`detectStallWithCurrentTimeMs`	`number \| undefined`
`drmSystemOptions`	`DRMSystemOptions \| undefined`
`drmSystems`	`DRMSystemsConfiguration \| undefined`
`emeController`	`typeof EMEController \| undefined`
`emeEnabled`	`boolean \| undefined`
`enableCEA708Captions`	`boolean \| undefined`
`enableDateRangeMetadataCues`	`boolean \| undefined`
`enableEmsgKLVMetadata`	`boolean \| undefined`
`enableEmsgMetadataCues`	`boolean \| undefined`
`enableID3MetadataCues`	`boolean \| undefined`
`enableIMSC1`	`boolean \| undefined`
`enableInterstitialPlayback`	`boolean \| undefined`
`enableSoftwareAES`	`boolean \| undefined`
`enableWebVTT`	`boolean \| undefined`
`enableWorker`	`boolean \| undefined`
`errorController`	`typeof ErrorController \| undefined`
`fetchSetup`	`Request) \| undefined \| function`
Type `((context: LoaderContext, initParams: any) => Promise<Request> \| Request) \| undefined`
`fLoader`	`FragmentLoaderConstructor \| undefined`
`forceKeyFrameOnDiscontinuity`	`boolean \| undefined`
`fpsController`	`typeof FPSController \| undefined`
`fpsDroppedMonitoringPeriod`	`number \| undefined`
`fpsDroppedMonitoringThreshold`	`number \| undefined`
`fragLoadingMaxRetry`	`number \| undefined`
`fragLoadingMaxRetryTimeout`	`number \| undefined`
`fragLoadingRetryDelay`	`number \| undefined`
`fragLoadingTimeOut`	`number \| undefined`
`fragLoadPolicy`	`LoadPolicy \| undefined`
`frontBufferFlushThreshold`	`number \| undefined`
`highBufferWatchdogPeriod`	`number \| undefined`
`ignoreDevicePixelRatio`	`boolean \| undefined`
`ignorePlaylistParsingErrors`	`boolean \| undefined`
`initialLiveManifestSize`	`number \| undefined`
`interstitialAppendInPlace`	`boolean \| undefined`
`interstitialAssetListLoadPolicy`	`LoadPolicy \| undefined`
`interstitialLiveLookAhead`	`number \| undefined`
`interstitialsController`	`typeof InterstitialsController \| unde...`
Type `typeof InterstitialsController \| undefined`
`keyLoadPolicy`	`LoadPolicy \| undefined`
`levelLoadingMaxRetry`	`number \| undefined`
`levelLoadingMaxRetryTimeout`	`number \| undefined`
`levelLoadingRetryDelay`	`number \| undefined`
`levelLoadingTimeOut`	`number \| undefined`
`licenseResponseCallback`	`undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext) => ArrayBuffer) \| undefined`
`licenseXhrSetup`	`Uint8Array \| Promise<Uint8Array \| void>) \| undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext, licenseChallenge: Uint8Array) => void \| Uint8Array \| Promise<Uint8Array \| void>) \| undefined`
`liveBackBufferLength`	`number \| null \| undefined`
`liveDurationInfinity`	`boolean \| undefined`
`liveMaxLatencyDuration`	`number \| undefined`
`liveMaxLatencyDurationCount`	`number \| undefined`
`liveSyncDuration`	`number \| undefined`
`liveSyncDurationCount`	`number \| undefined`
`liveSyncMode`	`'edge' \| 'buffered' \| undefined`
`liveSyncOnStallIncrease`	`number \| undefined`
`loader`	`object`
Type `{ new (confg: HlsConfig): Loader<LoaderContext>; } \| undefined`
`lowLatencyMode`	`boolean \| undefined`
`manifestLoadingMaxRetry`	`number \| undefined`
`manifestLoadingMaxRetryTimeout`	`number \| undefined`
`manifestLoadingRetryDelay`	`number \| undefined`
`manifestLoadingTimeOut`	`number \| undefined`
`manifestLoadPolicy`	`LoadPolicy \| undefined`
`maxAudioFramesDrift`	`number \| undefined`
`maxBufferHole`	`number \| undefined`
`maxBufferLength`	`number \| undefined`
`maxBufferSize`	`number \| undefined`
`maxDevicePixelRatio`	`number \| undefined`
`maxFragLookUpTolerance`	`number \| undefined`
`maxLiveSyncPlaybackRate`	`number \| undefined`
`maxLoadingDelay`	`number \| undefined`
`maxMaxBufferLength`	`number \| undefined`
`maxStarvationDelay`	`number \| undefined`
`minAutoBitrate`	`number \| undefined`
`nudgeMaxRetry`	`number \| undefined`
`nudgeOffset`	`number \| undefined`
`nudgeOnVideoHole`	`boolean \| undefined`
`playlistLoadPolicy`	`LoadPolicy \| undefined`
`pLoader`	`PlaylistLoaderConstructor \| undefined`
`preferManagedMediaSource`	`boolean \| undefined`
`preserveManualLevelOnError`	`boolean \| undefined`
`primarySessionId`	`string \| undefined`
`progressive`	`boolean \| undefined`
`renderTextTracksNatively`	`boolean \| undefined`
`requestMediaKeySystemAccessFunc`	`MediaKeyFunc \| null \| undefined`
`requireKeySystemAccessOnStart`	`boolean \| undefined`
`startFragPrefetch`	`boolean \| undefined`
`startLevel`	`number \| undefined`
`startOnSegmentBoundary`	`boolean \| undefined`
`startPosition`	`number \| undefined`
`steeringManifestLoadPolicy`	`LoadPolicy \| undefined`
`stretchShortVideoTrack`	`boolean \| undefined`
`subtitlePreference`	`SubtitleSelectionOption \| undefined`
`subtitleStreamController`	`typeof SubtitleStreamController \| und...`
Type `typeof SubtitleStreamController \| undefined`
`subtitleTrackController`	`typeof SubtitleTrackController \| unde...`
Type `typeof SubtitleTrackController \| undefined`
`testBandwidth`	`boolean \| undefined`
`timelineController`	`typeof TimelineController \| undefined`
`timelineOffset`	`number \| undefined`
`useMediaCapabilities`	`boolean \| undefined`
`videoPreference`	`VideoSelectionOption \| undefined`
`widevineLicenseUrl`	`string \| undefined`
`workerPath`	`string \| null \| undefined`
`xhrSetup`	`void) \| undefined \| function`
Type `((xhr: XMLHttpRequest, url: string) => Promise<void> \| void) \| undefined`

`source.engine.nativeHls`

Options passed under source.engine.nativeHls.

Option	Type	Details
`drmSystems`	`DrmSystemsConfig \| undefined`
Description License servers for protected content, keyed by EME key system id. An escape hatch for licensing native playback differently from every other path: naming it replaces `source.drm` here, and nowhere else.

Methods

Supports these media methods. See HTMLVideoElement for details: addTextTrackcanPlayTypeexitFullscreenexitPictureInPictureloadpauseplayrefreshContentDatarequestFullscreenrequestPictureInPicture

Events

Re-dispatches these standard media events from the internal media element: abortaddtrackcanplaycanplaythroughchangedurationchangeemptiedendedenterpictureinpictureerrorleavepictureinpictureloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeremovetrackresizeseekedseekingstalledsuspendtimeupdatevolumechangewaiting

Also emits these Video.js-specific events:

Event	Description
`contentdatachange`	Fired when the derived `contentData` changes. Read `contentData` for the new value.
`sourcechange`	Fired when `source` changes, either directly or by resolving a new `src`. Read `source` for the new value.
`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.

CSS custom properties

Variable	Details
`--media-video-border-radius`
Description Border radius of the video element.
`--media-object-fit`
Description Object fit for the video.
`--media-object-position`
Description Object position for the video.
`--media-caption-track-duration`
Description Duration of the caption track transition.
`--media-caption-track-delay`
Description Delay before the caption track transition.
`--media-caption-track-y`
Description Vertical offset of the caption track.

Option	Type	Details
`abrBandWidthFactor`	`number \| undefined`
`abrBandWidthUpFactor`	`number \| undefined`
`abrController`	`typeof AbrController \| undefined`
`abrEwmaDefaultEstimate`	`number \| undefined`
Description Default bandwidth estimate in bits/s prior to collecting fragment bandwidth samples
`abrEwmaDefaultEstimateMax`	`number \| undefined`
`abrEwmaFastLive`	`number \| undefined`
`abrEwmaFastVoD`	`number \| undefined`
`abrEwmaSlowLive`	`number \| undefined`
`abrEwmaSlowVoD`	`number \| undefined`
`abrMaxWithRealBitrate`	`boolean \| undefined`
`appendErrorMaxRetry`	`number \| undefined`
`assetPlayerId`	`string \| undefined`
`audioPreference`	`AudioSelectionOption \| undefined`
`audioStreamController`	`typeof AudioStreamController \| undefined`
`audioTrackController`	`typeof AudioTrackController \| undefined`
`autoStartLoad`	`boolean \| undefined`
`backBufferLength`	`number \| undefined`
`bufferController`	`typeof BufferController \| undefined`
`capLevelController`	`typeof CapLevelController \| undefined`
`capLevelOnFPSDrop`	`boolean \| undefined`
`capLevelToPlayerSize`	`boolean \| undefined`
`captionsTextTrack1Label`	`string \| undefined`
`captionsTextTrack1LanguageCode`	`string \| undefined`
`captionsTextTrack2Label`	`string \| undefined`
`captionsTextTrack2LanguageCode`	`string \| undefined`
`captionsTextTrack3Label`	`string \| undefined`
`captionsTextTrack3LanguageCode`	`string \| undefined`
`captionsTextTrack4Label`	`string \| undefined`
`captionsTextTrack4LanguageCode`	`string \| undefined`
`certLoadPolicy`	`LoadPolicy \| undefined`
`cmcd`	`CMCDControllerConfig \| undefined`
`cmcdController`	`typeof CMCDController \| undefined`
`contentSteeringController`	`typeof ContentSteeringController \| un...`
Type `typeof ContentSteeringController \| undefined`
`cueHandler`	`CuesInterface \| undefined`
`debug`	`boolean \| ILogger \| undefined`
`defaultAudioCodec`	`string \| undefined`
`detectStallWithCurrentTimeMs`	`number \| undefined`
`drmSystemOptions`	`DRMSystemOptions \| undefined`
`drmSystems`	`DRMSystemsConfiguration \| undefined`
`emeController`	`typeof EMEController \| undefined`
`emeEnabled`	`boolean \| undefined`
`enableCEA708Captions`	`boolean \| undefined`
`enableDateRangeMetadataCues`	`boolean \| undefined`
`enableEmsgKLVMetadata`	`boolean \| undefined`
`enableEmsgMetadataCues`	`boolean \| undefined`
`enableID3MetadataCues`	`boolean \| undefined`
`enableIMSC1`	`boolean \| undefined`
`enableInterstitialPlayback`	`boolean \| undefined`
`enableSoftwareAES`	`boolean \| undefined`
`enableWebVTT`	`boolean \| undefined`
`enableWorker`	`boolean \| undefined`
`errorController`	`typeof ErrorController \| undefined`
`fetchSetup`	`Request) \| undefined \| function`
Type `((context: LoaderContext, initParams: any) => Promise<Request> \| Request) \| undefined`
`fLoader`	`FragmentLoaderConstructor \| undefined`
`forceKeyFrameOnDiscontinuity`	`boolean \| undefined`
`fpsController`	`typeof FPSController \| undefined`
`fpsDroppedMonitoringPeriod`	`number \| undefined`
`fpsDroppedMonitoringThreshold`	`number \| undefined`
`fragLoadingMaxRetry`	`number \| undefined`
`fragLoadingMaxRetryTimeout`	`number \| undefined`
`fragLoadingRetryDelay`	`number \| undefined`
`fragLoadingTimeOut`	`number \| undefined`
`fragLoadPolicy`	`LoadPolicy \| undefined`
`frontBufferFlushThreshold`	`number \| undefined`
`highBufferWatchdogPeriod`	`number \| undefined`
`ignoreDevicePixelRatio`	`boolean \| undefined`
`ignorePlaylistParsingErrors`	`boolean \| undefined`
`initialLiveManifestSize`	`number \| undefined`
`interstitialAppendInPlace`	`boolean \| undefined`
`interstitialAssetListLoadPolicy`	`LoadPolicy \| undefined`
`interstitialLiveLookAhead`	`number \| undefined`
`interstitialsController`	`typeof InterstitialsController \| unde...`
Type `typeof InterstitialsController \| undefined`
`keyLoadPolicy`	`LoadPolicy \| undefined`
`levelLoadingMaxRetry`	`number \| undefined`
`levelLoadingMaxRetryTimeout`	`number \| undefined`
`levelLoadingRetryDelay`	`number \| undefined`
`levelLoadingTimeOut`	`number \| undefined`
`licenseResponseCallback`	`undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext) => ArrayBuffer) \| undefined`
`licenseXhrSetup`	`Uint8Array \| Promise<Uint8Array \| void>) \| undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext, licenseChallenge: Uint8Array) => void \| Uint8Array \| Promise<Uint8Array \| void>) \| undefined`
`liveBackBufferLength`	`number \| null \| undefined`
`liveDurationInfinity`	`boolean \| undefined`
`liveMaxLatencyDuration`	`number \| undefined`
`liveMaxLatencyDurationCount`	`number \| undefined`
`liveSyncDuration`	`number \| undefined`
`liveSyncDurationCount`	`number \| undefined`
`liveSyncMode`	`'edge' \| 'buffered' \| undefined`
`liveSyncOnStallIncrease`	`number \| undefined`
`loader`	`object`
Type `{ new (confg: HlsConfig): Loader<LoaderContext>; } \| undefined`
`lowLatencyMode`	`boolean \| undefined`
`manifestLoadingMaxRetry`	`number \| undefined`
`manifestLoadingMaxRetryTimeout`	`number \| undefined`
`manifestLoadingRetryDelay`	`number \| undefined`
`manifestLoadingTimeOut`	`number \| undefined`
`manifestLoadPolicy`	`LoadPolicy \| undefined`
`maxAudioFramesDrift`	`number \| undefined`
`maxBufferHole`	`number \| undefined`
`maxBufferLength`	`number \| undefined`
`maxBufferSize`	`number \| undefined`
`maxDevicePixelRatio`	`number \| undefined`
`maxFragLookUpTolerance`	`number \| undefined`
`maxLiveSyncPlaybackRate`	`number \| undefined`
`maxLoadingDelay`	`number \| undefined`
`maxMaxBufferLength`	`number \| undefined`
`maxStarvationDelay`	`number \| undefined`
`minAutoBitrate`	`number \| undefined`
`nudgeMaxRetry`	`number \| undefined`
`nudgeOffset`	`number \| undefined`
`nudgeOnVideoHole`	`boolean \| undefined`
`playlistLoadPolicy`	`LoadPolicy \| undefined`
`pLoader`	`PlaylistLoaderConstructor \| undefined`
`preferManagedMediaSource`	`boolean \| undefined`
`preserveManualLevelOnError`	`boolean \| undefined`
`primarySessionId`	`string \| undefined`
`progressive`	`boolean \| undefined`
`renderTextTracksNatively`	`boolean \| undefined`
`requestMediaKeySystemAccessFunc`	`MediaKeyFunc \| null \| undefined`
`requireKeySystemAccessOnStart`	`boolean \| undefined`
`startFragPrefetch`	`boolean \| undefined`
`startLevel`	`number \| undefined`
`startOnSegmentBoundary`	`boolean \| undefined`
`startPosition`	`number \| undefined`
`steeringManifestLoadPolicy`	`LoadPolicy \| undefined`
`stretchShortVideoTrack`	`boolean \| undefined`
`subtitlePreference`	`SubtitleSelectionOption \| undefined`
`subtitleStreamController`	`typeof SubtitleStreamController \| und...`
Type `typeof SubtitleStreamController \| undefined`
`subtitleTrackController`	`typeof SubtitleTrackController \| unde...`
Type `typeof SubtitleTrackController \| undefined`
`testBandwidth`	`boolean \| undefined`
`timelineController`	`typeof TimelineController \| undefined`
`timelineOffset`	`number \| undefined`
`useMediaCapabilities`	`boolean \| undefined`
`videoPreference`	`VideoSelectionOption \| undefined`
`widevineLicenseUrl`	`string \| undefined`
`workerPath`	`string \| null \| undefined`
`xhrSetup`	`void) \| undefined \| function`
Type `((xhr: XMLHttpRequest, url: string) => Promise<void> \| void) \| undefined`