Skip to content

Module: src/streaming/Hls

The Hls component integrates the hls.js library into the player for MPEG-HLS streaming, adding Widevine (and optional Fairplay) DRM support. It allows adaptive streaming, real-time error handling, subtitle, language and quality control integration, and reacts to various stream metadata updates.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
ExtendedMediaError
Source
Hls.js, line 14

Constructor

new Hls(player, mediaComponent, apiKey)

Creates an instance of the Hls plugin.

Parameters:
Name Type Description
player Player

Reference to the player instance.

mediaComponent Media

Reference to the engine (video) instance.

apiKey symbol

Token for extended access to the player API.

Members

Properties
Name Type Attributes Default Description
lazyLoadLib boolean optional true

If true, the Hls.js library is only loaded when loading the first media item.

libUrl string optional

Custom URL for the Hls.js library. Defaults to CDN URL if not specified.

debug boolean optional false

Enables verbose logging from the HLS component.

Type
Object
Source
Hls.js, line 22

Reference to the main player instance.

Type
Player
Source
Hls.js, line 32

Holds tokens of subscriptions to player events, for later unsubscribe.

Type
Array<number>
Source
Hls.js, line 38

Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.

Type
symbol
Source
Hls.js, line 45

Reference to the Media instance.

Type
Media
Source
Hls.js, line 51

Reference to the dash.js instance.

Type
Object
Source
Hls.js, line 57

Reference to the Async Task instance. Used to handle async tasks, which can be cancelled, resolved or rejected.

Type
AsyncTask
Source
Hls.js, line 63

Holds metadata information provided by media.load and loaded metadata.

Type
Media~metaData
Source
Hls.js, line 69

Promise awaiting the loading of the dash lib.

Type
Promise
Source
Hls.js, line 75

Methods

canPlay(metaData) → string

Checks if hls.js can handle the given mimeType and optional DRM system. ('Widevine').

Parameters:
Name Type Description
metaData Media~metaData

The data to test.

Parameters:
Name Type Attributes Description
mimeType string

The mime type to test.

drmSystem string optional

Optional DRM system info.

Returns

'maybe' or '' (empty).

Type string
Source
Hls.js, line 118

async load(metaData, optionsopt) → Promise|undefined

Initializes the hls.js library for a given source. Sets up the config (DRM if needed), attaches to the video stream, loads the HLS source.

Parameters:
Name Type Attributes Description
metaData Media~metaData

Source Object (currentSource).

Parameters:
Name Type Description
src string

Actual HLS URL to load.

options Object optional

Additional options.

Parameters:
Name Type Attributes Description
loadTask AsyncTask optional

If a source task instance is provided, handle errors using this object.

Returns

If a source task instance is provided, returns a promise that rejects with a resulting media error.

Type Promise | undefined
Throws

If drm scheme is unknown.

Type Error
Source
Hls.js, line 133

private #loadHlsJs() → Promise<void>

Loads dash.js via CDN if not present. Ensures only one load attempt per instance.

Returns
Type Promise<void>
Source
Hls.js, line 211

onLoaded(metaData)

Called by the media component when metadata has loaded, but before the media/reafy event has been sent. Allows the plugin to add additional metadata to the mediaSource object.

Parameters:
Name Type Description
metaData Media~metaData

The source to load.

Source
Hls.js, line 265

private #onHlsLevelLoaded(event, data)

Called when a new Hls level is loaded. Updates 'islive' data attribute on the video element accordingly.

Parameters:
Name Type Description
event string

The HLS LEVEL_LOADED event.

data Object

Video data.

Source
Hls.js, line 286

private #onMediaReady()

Called when the media metadata is loaded to initialize languages/qualities if needed.

Listens
media/ready
Source
Hls.js, line 304

private #onLanguageSelected(langObj)

Called when a language is selected in the language menu. Switches the HLS audio track accordingly.

Parameters:
Name Type Description
langObj Language~langObj

Object with selected language information.

Parameters:
Name Type Description
lang string

Language code.

id number

Contains language ID.

Listens
language/selected
Source
Hls.js, line 343

private #onQualitySelected(quality)

Called when a quality is selected in the quality menu. Finds the matching level and sets it, or 'auto' if not found.

Parameters:
Name Type Description
quality string

The chosen resolution, e.g. '720p'.

Listens
quality/selected
Source
Hls.js, line 358

private #onHlsAudioSwitch(event, data)

Handler for the hls 'AUDIO_TRACK_SWITCHED' event. Publishes 'language/active' to sync the internal track with the player's language state.

Parameters:
Name Type Description
event string

The HLS AUDIO_TRACK_SWITCHED event.

data Object

Newly selected audio track.

Fires
language/active
Source
Hls.js, line 377

private #onHlsQualitySwitch(event, data)

Handler for the hls 'LEVEL_SWITCHED' event. Publishes 'quality/active' to sync the internal track with the player's language state.

Parameters:
Name Type Description
event string

The HLS LEVEL_SWITCHED event.

data Object

Newly selected level.

Fires
language/active
Source
Hls.js, line 393

private #onLogEvent(event, data)

Logs Hls.js events if debug is enabled.

Parameters:
Name Type Description
event string

The hls debug event.

data Object

The original event data.

Source
Hls.js, line 405

private #onHlsError(event, data)

This method is responsible for translating errors coming from the HLS library, so that they can be handled like errors coming from the standard engine This is done by listening to selected events coming from the HLS library, and sending out errors via pubsub with the closest approximation to the standard HTML5 media error codes. In addition, the media error object is simulated by using a customized subclass of the standard error object.

Parameters:
Name Type Description
event Event

The event coming from the HLS library.

data Object

HLS Library event data.

Parameters:
Name Type Attributes Description
fatal boolean

Indicates a fatal error.

type string

The HLS error type from the lib.

details string optional

Additional error Details.

reason string optional

Reason for error.

Fires
media/error
Source
Hls.js, line 421

private #removeHls()

Removes the current HLS instance if present, unsubscribes from events, etc.

Listens
data/ready
Source
Hls.js, line 497

destroy()

This method removes all events, subscriptions and DOM nodes created by this component.

Source
Hls.js, line 514