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.

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

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.

• 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:

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:

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:

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: