Looking for the old docs? Go here



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.


Please 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 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.

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" }

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


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


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

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 find a complete list of player events in the component API reference.

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


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