Looking for the old docs? Go here

Providers

HLS

This provider enables streaming media using the HTTP Live Streaming (HLS) protocol.

This provider is used to embed streamable video content into documents using the native <video> element, and supports streaming media using the HTTP Live Streaming (HLS) protocol. The provider will prefer using hls.js over the native engine when supported to enable a consistent and configurable experience across vendors. It works anywhere Media Source Extensions (MSE) or Managed Media Source (MMS) is supported.

INFO

Refer to the Player component if you’re looking for props, methods, and events.

You’ll need to install hls.js if you’re using the provider locally (i.e., not over a CDN):

terminal
    
    

You can set a HLS source on the player like so:

    
    

The HLS source URL should include the .m3u8 file extension.

If the source URL does not contain a file extension, you must provide one of the following type hints: application/vnd.apple.mpegurl, audio/mpegurl, audio/x-mpegurl, application/x-mpegurl, video/x-mpegurl, video/mpegurl, application/mpegurl.

The following are valid as they have a file extension or type hint:

  • src="https://example.com/hls.m3u8"
  • src = { src: "https://example.com/hls", type: "application/x-mpegurl" }

You can create HLS playlists client-side like so:

    
    

The provider will default to loading hls.js from JSDelivr. We load the default bundle in development, and the minified version in production:

    
    
INFO

You can point library at any URL that re-exports hls.js@^1.0. This means you can use your own server or CDN if desired.

You can also load hls.js by statically, or dynamically importing it and setting the library property on the provider like so:

    
    

Regardless how you decide to load hls.js (NPM/CDN), the provider will fire the following events on the player while loading the library:

    
    

You can configure hls.js using the config property on the provider like so:

    
    
INFO

See the hls.js fine tuning guide on how to configure the library.

You can set custom request headers by using the xhrSetup configuration option. The following snippet shows how to set the Authorization header:

    
    

You can obtain a reference to the hls.js instance like so:

    
    

All hls.js events can be listened to directly off the player component:

    
    
CallbackType
onHlsAudioTrackLoaded
function
onHlsAudioTrackLoading
function
onHlsAudioTrackSwitched
function
onHlsAudioTrackSwitching
function
onHlsAudioTracksUpdated
function
onHlsBackBufferReached
function
onHlsBufferAppended
function
onHlsBufferAppending
function
onHlsBufferCodecs
function
onHlsBufferCreated
function
onHlsBufferEos
function
onHlsBufferFlushed
function
onHlsBufferFlushing
function
onHlsBufferReset
function
onHlsCuesParsed
function
onHlsDestroying
function
onHlsError
function
onHlsFpsDrop
function
onHlsFpsDropLevelCapping
function
onHlsFragBufferedData
function
onHlsFragChanged
function
onHlsFragDecrypted
function
onHlsFragLoadEmergencyAborted
function
onHlsFragLoaded
function
onHlsFragLoading
function
onHlsFragParsed
function
onHlsFragParsingInitSegment
function
onHlsFragParsingMetadata
function
onHlsFragParsingUserdata
function
onHlsInitPtsFound
function
onHlsInstance
function
onHlsKeyLoaded
function
onHlsKeyLoading
function
onHlsLevelLoaded
function
onHlsLevelLoading
function
onHlsLevelPtsUpdated
function
onHlsLevelSwitched
function
onHlsLevelSwitching
function
onHlsLevelUpdated
function
onHlsLevelsUpdated
function
onHlsLibLoadError
function
onHlsLibLoadStart
function
onHlsLibLoaded
function
onHlsManifestLoaded
function
onHlsManifestLoading
function
onHlsManifestParsed
function
onHlsMediaAttached
function
onHlsMediaAttaching
function
onHlsMediaDetached
function
onHlsMediaDetaching
function
onHlsNonNativeTextTracksFound
function
onHlsSubtitleFragProcessed
function
onHlsSubtitleTrackLoaded
function
onHlsSubtitleTrackLoading
function
onHlsSubtitleTrackSwitch
function
onHlsSubtitleTracksCleared
function
onHlsSubtitleTracksUpdated
function
onHlsUnsupported
function

All HLS event types are prefixed with HLS and end with Event like so:

    
    

You can obtain a reference to the underlying HTMLVideoElement element like so:

    
    

The HTMLVideoElement can also be referenced on all media events like so:

    
    

Previous
Next