Providers

HLS

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

# Import

        import '@vidstack/player/define/vds-hls.js';

      

        <script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-hls.js"
></script>

      

# Install

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

      

# Usage

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

          
1
2
3
		    

# Loading hls.js

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.

# Importing hls.js

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:

# Load Events

The provider will fire the following events while loading hls.js:

• 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).

# Configuring hls.js

You can configure hls.js using the hlsConfig property like so:

# HLS Engine

If you need access to the hls.js instance, you can access it off the hlsEngine property on the <vds-hls> component:

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 Events

All hls.js events can be listened to directly off the <vds-hls> component. Some examples include:

• Hls.Events.MEDIA_ATTACHED -> vds-hls-media-attached
• Hls.Events.MANIFEST_LOADED -> vds-hls-manifest-loaded
• Hls.Events.LEVEL_SWITCHING -> vds-hls-level-switching