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.

You’ll need to install hls.js if you’re using the HLS 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" }

The HLS 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 hls.js:

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

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: