Providers
HLS Video API
# Props
Attribute:
config
Type:
{ debug?: boolean | ILogger; enableWorker?: boolean; enableSoftwareAES?: boolean; minAutoBitrate?: number; ignoreDevicePixelRatio?: boolean; loader?: new (confg: HlsConfig) => Loader<LoaderContext>; fetchSetup?: (context: LoaderContext, initParams: any) => Request; xhrSetup?: (xhr: XMLHttpRequest, url: string) => void; audioStreamController?: typeof AudioStreamController; audioTrackController?: typeof AudioTrackController; subtitleStreamController?: typeof SubtitleStreamController; subtitleTrackController?: typeof SubtitleTrackController; timelineController?: typeof TimelineController; emeController?: typeof EMEController; cmcd?: CMCDControllerConfig; cmcdController?: typeof CMCDController; abrController?: typeof AbrController; bufferController?: typeof BufferController; capLevelController?: typeof CapLevelController; fpsController?: typeof FPSController; progressive?: boolean; lowLatencyMode?: boolean; abrEwmaFastLive?: number; abrEwmaSlowLive?: number; abrEwmaFastVoD?: number; abrEwmaSlowVoD?: number; abrEwmaDefaultEstimate?: number; abrBandWidthFactor?: number; abrBandWidthUpFactor?: number; abrMaxWithRealBitrate?: boolean; maxStarvationDelay?: number; maxLoadingDelay?: number; appendErrorMaxRetry?: number; backBufferLength?: number; liveDurationInfinity?: boolean; liveBackBufferLength?: number; capLevelToPlayerSize?: boolean; licenseXhrSetup?: (xhr: XMLHttpRequest, url: string) => void; licenseResponseCallback?: (xhr: XMLHttpRequest, url: string) => ArrayBuffer; emeEnabled?: boolean; widevineLicenseUrl?: string; drmSystemOptions?: DRMSystemOptions; requestMediaKeySystemAccessFunc?: MediaKeyFunc; capLevelOnFPSDrop?: boolean; fpsDroppedMonitoringPeriod?: number; fpsDroppedMonitoringThreshold?: number; fLoader?: FragmentLoaderConstructor; fragLoadingTimeOut?: number; fragLoadingMaxRetry?: number; fragLoadingRetryDelay?: number; fragLoadingMaxRetryTimeout?: number; startLevel?: number; stretchShortVideoTrack?: boolean; maxAudioFramesDrift?: number; pLoader?: PlaylistLoaderConstructor; manifestLoadingTimeOut?: number; manifestLoadingMaxRetry?: number; manifestLoadingRetryDelay?: number; manifestLoadingMaxRetryTimeout?: number; levelLoadingTimeOut?: number; levelLoadingMaxRetry?: number; levelLoadingRetryDelay?: number; levelLoadingMaxRetryTimeout?: number; autoStartLoad?: boolean; startPosition?: number; defaultAudioCodec?: string; initialLiveManifestSize?: number; maxBufferLength?: number; maxBufferSize?: number; maxBufferHole?: number; highBufferWatchdogPeriod?: number; nudgeOffset?: number; nudgeMaxRetry?: number; maxFragLookUpTolerance?: number; maxMaxBufferLength?: number; startFragPrefetch?: boolean; testBandwidth?: boolean; liveSyncDurationCount?: number; liveMaxLatencyDurationCount?: number; liveSyncDuration?: number; liveMaxLatencyDuration?: number; maxLiveSyncPlaybackRate?: number; enableDateRangeMetadataCues?: boolean; enableEmsgMetadataCues?: boolean; enableID3MetadataCues?: boolean; cueHandler?: CuesInterface; enableWebVTT?: boolean; enableIMSC1?: boolean; enableCEA708Captions?: boolean; captionsTextTrack1Label?: string; captionsTextTrack1LanguageCode?: string; captionsTextTrack2Label?: string; captionsTextTrack2LanguageCode?: string; captionsTextTrack3Label?: string; captionsTextTrack3LanguageCode?: string; captionsTextTrack4Label?: string; captionsTextTrack4LanguageCode?: string; renderTextTracksNatively?: boolean; forceKeyFrameOnDiscontinuity?: boolean; }
The
hls.js configuration object.
Attribute:
library
Type:
string | typeof Hls | HLSConstructorLoader
The
hls.js constructor (supports dynamic imports) or a URL of where it can be found.
Attribute:
preload
Type:
'none' | 'metadata' | 'auto'
Configures the preload setting of the underlying media element once it can load (see
loading property). This will overwrite any existing preload value on the <audio>
or <video> element.
The preload attribute provides a hint to the browser about what the author thinks will
lead to the best user experience with regards to what content is loaded before the video is
played. The recommended default is metadata.
# Events
Type:
HLSLibLoadStartEvent
Detail:
void
Fired when the browser begins downloading the
hls.js library.
Type:
HLSLibLoadErrorEvent
Detail:
Error
Fired when the
hls.js library fails during the download process.
Type:
HLSInstanceEvent
Detail:
Hls
Fired when the
hls.js instance is built. This will not fire if the browser does not
support hls.js.
Type:
HLSUnsupportedEvent
Detail:
void
Fired when the browser doesn't support HLS natively, _and_
hls.js doesn't support
this environment either, most likely due to missing Media Extensions or video codecs.
Type:
HLSMediaAttachingEvent
Detail:
MediaAttachingData
Fired before
MediaSource begins attaching to the media element.
Type:
HLSMediaAttachedEvent
Detail:
MediaAttachedData
Fired when
MediaSource has been successfully attached to the media element.
Type:
HLSMediaDetachingEvent
Detail:
void
Fired before detaching
MediaSource from the media element.
Type:
HLSMediaDetachedEvent
Detail:
void
Fired when
MediaSource has been detached from media element.
Type:
HLSBufferCodecsEvent
Detail:
BufferCodecsData
Fired when we know about the codecs that we need buffers for to push into.
Type:
HLSBufferCreatedEvent
Detail:
BufferCreatedData
Fired when
SourceBuffer's have been created.
Type:
HLSBufferAppendingEvent
Detail:
BufferAppendingData
Fired when we begin appending a media segment to the buffer.
Type:
HLSBufferAppendedEvent
Detail:
BufferAppendedData
Fired when we are done with appending a media segment to the buffer.
Type:
HLSBufferEosEvent
Detail:
BufferEOSData
Fired when the stream is finished and we want to notify the media buffer that there will be no
more data.
Type:
HLSBufferFlushingEvent
Detail:
BufferFlushingData
Fired when the media buffer should be flushed.
Type:
HLSBufferFlushedEvent
Detail:
BufferFlushedData
Fired when the media buffer has been flushed.
Type:
HLSManifestLoadingEvent
Detail:
ManifestLoadingData
Fired to signal that manifest loading is starting.
Type:
HLSManifestLoadedEvent
Detail:
ManifestLoadedData
Fired after the manifest has been loaded.
Type:
HLSManifestParsedEvent
Detail:
ManifestParsedData
Fired after manifest has been parsed.
Type:
HLSLevelSwitchingEvent
Detail:
LevelSwitchingData
Fired when a level switch is requested.
Type:
HLSLevelSwitchedEvent
Detail:
LevelSwitchedData
Fired when a level switch is effective.
Type:
HLSLevelLoadingEvent
Detail:
LevelLoadingData
Fired when a level playlist loading starts.
Type:
HLSLevelLoadedEvent
Detail:
LevelLoadedData
Fired when a level playlist loading finishes.
Type:
HLSLevelUpdatedEvent
Detail:
LevelUpdatedData
Fired when a level's details have been updated based on previous details, after it has been
loaded.
Type:
HLSLevelPtsUpdatedEvent
Detail:
LevelPTSUpdatedData
Fired when a level's PTS information has been updated after parsing a fragment.
Type:
HLSLevelsUpdatedEvent
Detail:
LevelsUpdatedData
Fired when a level is removed after calling
removeLevel().
Type:
HLSAudioTracksUpdatedEvent
Detail:
AudioTracksUpdatedData
Fired to notify that the audio track list has been updated.
Type:
HLSAudioTrackSwitchingEvent
Detail:
AudioTrackSwitchingData
Fired when an audio track switching is requested.
Type:
HLSAudioTrackSwitchedEvent
Detail:
AudioTrackSwitchedData
Fired when an audio track switch actually occurs.
Type:
HLSAudioTrackLoadingEvent
Detail:
TrackLoadingData
Fired when loading an audio track starts.
Type:
HLSAudioTrackLoadedEvent
Detail:
AudioTrackLoadedData
Fired when loading an audio track finishes.
Type:
HLSSubtitleTracksUpdatedEvent
Detail:
SubtitleTracksUpdatedData
Fired to notify that the subtitle track list has been updated.
Type:
HLSSubtitleTracksClearedEvent
Detail:
void
Fired to notify that subtitle tracks were cleared as a result of stopping the media.
Type:
HLSSubtitleTrackSwitchEvent
Detail:
SubtitleTrackSwitchData
Fired when a subtitle track switch occurs.
Type:
HLSSubtitleTrackLoadingEvent
Detail:
TrackLoadingData
Fired when loading a subtitle track starts.
Type:
HLSSubtitleTrackLoadedEvent
Detail:
SubtitleTrackLoadedData
Fired when loading a subtitle track finishes.
Type:
HLSSubtitleFragProcessedEvent
Detail:
SubtitleFragProcessedData
Fired when a subtitle fragment has been processed.
Type:
HLSCuesParsedEvent
Detail:
CuesParsedData
Fired when a set of
VTTCue's to be managed externally has been parsed.
Type:
HLSNonNativeTextTracksFoundEvent
Detail:
NonNativeTextTracksData
Fired when a text track to be managed externally is found.
Type:
HLSInitPtsFoundEvent
Detail:
InitPTSFoundData
Fired when the first timestamp is found.
Type:
HLSFragLoadEmergencyAbortedEvent
Detail:
FragLoadEmergencyAbortedData
Fired when fragment loading is aborted for emergency switch down.
Type:
HLSFragDecryptedEvent
Detail:
FragDecryptedData
Fired when a fragment has finished decrypting.
Type:
HLSFragParsingInitSegmentEvent
Detail:
FragParsingInitSegmentData
Fired when
InitSegment has been extracted from a fragment.
Type:
HLSFragParsingUserdataEvent
Detail:
FragParsingUserdataData
Fired when parsing sei text is completed.
Type:
HLSFragParsingMetadataEvent
Detail:
FragParsingMetadataData
Fired when parsing id3 is completed.
Type:
HLSFragBufferedDataEvent
Detail:
FragBufferedData
Fired when fragment remuxed MP4 boxes have all been appended into
SourceBuffer.
Type:
HLSFragChangedEvent
Detail:
FragChangedData
Fired when fragment matching with current media position is changing.
Type:
HLSFpsDropLevelCappingEvent
Detail:
FPSDropLevelCappingData
Fired when FPS drop triggers auto level capping.
Type:
HLSErrorEvent
Detail:
ErrorData
Fired when an error has occurred during loading or playback.
Type:
HLSDestroyingEvent
Detail:
void
Fired when the
hls.js instance is being destroyed. Different from hls-media-detached as
one could want to detach, and reattach media to the hls.js instance to handle mid-rolls.
Type:
HLSBackBufferReachedEvent
Detail:
BackBufferData
Fired when the back buffer is reached as defined by the
backBufferLength config option.
# Slots
Learn more about slotsUsed to pass in the
<video> element.
# CSS Vars
Learn more about cssVarsType:
number
The width of the video element.
Type:
number
The height of the video element.
Type:
string
The background color of the video content.
# Instance Props
Type:
HLSContext
Contains the HLS constructor, engine (i.e.,
hls.js instance), and additional information
on whether HLS is supported in this environment or the current engine is attached to the
underlying HTML media element.
Type:
'none' | 'metadata' | 'auto'
Configures the preload setting of the underlying media element once it can load (see
loading property). This will overwrite any existing preload value on the <audio>
or <video> element.
The preload attribute provides a hint to the browser about what the author thinks will
lead to the best user experience with regards to what content is loaded before the video is
played. The recommended default is metadata.
Type:
MediaAdapter
The media adapter provides a consistent interface with retrieving and updating media state
on a media provider. The adapter is used by the media controller to update media state.