This provider enables streaming media using the HTTP Live Streaming (HLS) protocol.
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-hls.js" ></script>
You'll need to install
hls.js if you're using the HLS provider locally (i.e., not over a CDN):
npm i hls.js
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. HLS streaming is supported natively in some browsers (e.g., iOS Safari), otherwise, we fallback to using
The HLS provider will default to loading the light version of
hls.js from JSDelivr. We load the default bundle in development, and the minified version in production.
You can point
hls-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
hlsLibrary property like so:
Or, you can dynamically import it like so:
The provider will fire the following events while loading
vds-hls-lib-load-start: Fired when we begin downloading the library.
vds-hls-lib-loaded: Fired when the library has been loaded.
vds-hls-lib-load-error: Fired when the library fails to download.
These events are fired regardless of how you decide to load the library (i.e., import or CDN).
You can configure
hls.js using the
hlsConfig property like so:
If you need access to the
hls.js instance, you can access it off the
hlsEngine property on the
Listen to the
vds-hls-instance event to be notified of when it's created (called before media is attached), and the
vds-hls-destroying event for when it will be destroyed.
hls.js events can be listened to directly off the
<vds-hls> component. Some examples include: