Providers
HLS
This provider enables streaming media using the HTTP Live Streaming (HLS) protocol.
Import
Install
You'll need to install hls.js
if you're using the HLS provider locally (i.e., not over a CDN):
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
.
hls.js
Loading 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.
hls.js
Importing 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).
hls.js
Configuring 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