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. It works anywhere
Media Source Extensions (MSE) or Managed Media Source (MMS) is supported.
Refer to the Player component if you’re looking for props, methods, and events.
Install
Section titled InstallYou’ll need to install hls.js
if you’re using the provider locally (i.e., not over a CDN):
Source
Section titled SourceYou can set a HLS source on the player like so:
Source Types
Section titled Source TypesThe 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" }
Client Playlist
Section titled Client PlaylistYou can create HLS playlists client-side like so:
Loading
Section titled LoadingThe 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.
Importing
Section titled ImportingYou can also load hls.js
by statically, or dynamically importing it and setting the library
property on the provider like so:
Load Events
Section titled Load EventsRegardless how you decide to load hls.js
(NPM/CDN), the provider will fire the following
events on the player while loading the library:
Configuring
Section titled ConfiguringYou 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.
Custom Headers
Section titled Custom HeadersYou can set custom request headers by using the xhrSetup
configuration option. The following
snippet shows how to set the Authorization
header:
Instance
Section titled InstanceYou can obtain a reference to the hls.js
instance like so:
Events
Section titled EventsAll hls.js events can be listened to directly off the player component:
Event Types
Section titled Event TypesAll HLS event types are prefixed with HLS
and end with Event
like so:
Element
Section titled ElementYou can obtain a reference to the underlying HTMLVideoElement
element like so:
Event Target
Section titled Event TargetThe HTMLVideoElement
can also be referenced on all media events like so: