Play back HLS with video.js, even where it's not natively supported
npm install videojs-contrib-hls[![Build Status][travis-icon]][travis-link]
[![Slack Status][slack-icon]][slack-link]
[![Greenkeeper badge][greenkeeper-icon]][greenkeeper-link]
Play back HLS with video.js, even where it's not natively supported.
Maintenance Status: Deprecated
Table of Contents generated with DocToc
- Installation
- NPM
- CDN
- Releases
- Manual Build
- Contributing
- Talk to us
- Getting Started
- Video.js 6
- Documentation
- Options
- How to use
- Initialization
- Source
- List
- withCredentials
- useCueTags
- overrideNative
- blacklistDuration
- bandwidth
- enableLowInitialPlaylist
- Runtime Properties
- hls.playlists.master
- hls.playlists.media
- hls.segmentXhrTime
- hls.bandwidth
- hls.bytesReceived
- hls.selectPlaylist
- hls.representations
- hls.xhr
- Events
- loadedmetadata
- HLS Usage Events
- Presence Stats
- Use Stats
- In-Band Metadata
- Segment Metadata
- Hosting Considerations
- Known Issues
- IE10 and Below
- Fragmented MP4 Support
- Testing
- Release History
- Building
- Development
- Tools
- Commands
videojs-contrib-hls with npm run``bash`
npm install --save videojs-contrib-hls
`html`
Check out our live example if you're having trouble.
`html`
Flash, and the videojs-flash plugin, are not
required, but are recommended as a fallback option for browsers that don't have a native
HLS player or support for Media Source Extensions.
- Supports (client-driven) adaptive bitrate selection
- Delivered over standard HTTP ports
- Simple, text-based manifest format
- No proprietary streaming servers required
Unfortunately, all the major desktop browsers except for Safari are
missing HLS support. That leaves web developers in the unfortunate
position of having to maintain alternate renditions of the same video
and potentially having to forego HTML-based video entirely to provide
the best desktop viewing experience.
This project addresses that situation by providing a polyfill for HLS
on browsers that have support for Media Source
Extensions, or failing that,
support Flash. You can deploy a single HLS stream, code against the
regular HTML5 video APIs, and create a fast, high-quality video
experience across all the big web device categories.
Check out the full documentation for details on how HLS works
and advanced configuration. A description of the adaptive switching
behavior is available, too.
videojs-contrib-hls supports a bunch of HLS features. Here
are some highlights:
- video-on-demand and live playback modes
- backup or redundant streams
- mid-segment quality switching
- AES-128 segment encryption
- CEA-608 captions are automatically translated into standard HTML5
[caption text tracks][0]
- In-Manifest WebVTT subtitles are automatically translated into standard HTML5
subtitle tracks
- Timed ID3 Metadata is automatically translated into HTML5 metedata
text tracks
- Highly customizable adaptive bitrate selection
- Automatic bandwidth tracking
- Cross-domain credentials support with CORS
- Tight integration with video.js and a philosophy of exposing as much
as possible with standard HTML APIs
- Stream with multiple audio tracks and switching to those audio tracks
(see the docs folder) for info
- Media content in
fragmented MP4s
instead of the MPEG2-TS container format.
[0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
##### Initialization
You may pass in an options object to the hls source handler at player
initialization. You can pass in options just like you would for other
parts of video.js:
`javascript
// html5 for html hls
videojs(video, {html5: {
hls: {
withCredentials: true
}
}});
// or
// flash for flash hls
videojs(video, {flash: {
hls: {
withCredentials: true
}
}});
// or
var options = {hls: {
withCredentials: true
}};
videojs(video, {flash: options, html5: options});
`
##### Source
Some options, such as withCredentials can be passed in to hls duringplayer.src
`javascript
var player = videojs('some-video-id');
player.src({
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
`
#### List
##### withCredentials
* Type: boolean
* can be used as a source option
* can be used as an initialization option
When the withCredentials property is set to true, all XHR requests forwithCredentials
manifests and segments would have set to true as well. ThisAccess-Control-Allow-Origin
enables storing and passing cookies from the server that the manifests and
segments live on. This has some implications on CORS because when set, the header cannot be set to *, also, the responseAccess-Control-Allow-Credentials
headers require the addition of header whichtrue
is set to .
See html5rocks's article
for more info.
##### handleManifestRedirects
* Type: boolean
* Default:
* can be used as a source option
* can be used as an initialization option
When the handleManifestRedirects property is set to true, manifest requests
which are redirected will have their URL updated to the new URL for future
requests.
##### useCueTags
* Type: boolean
* can be used as an initialization option
When the useCueTags property is set to true, a text track is created withplayer.textTracks()
label 'ad-cues' and kind 'metadata'. The track is then added to. Changes in active cue may be
tracked by following the Video.js cue points API for text tracks. For example:
`javascript
let textTracks = player.textTracks();
let cuesTrack;
for (let i = 0; i < textTracks.length; i++) {
if (textTracks[i].label === 'ad-cues') {
cuesTrack = textTracks[i];
}
}
cuesTrack.addEventListener('cuechange', function() {
let activeCues = cuesTrack.activeCues;
for (let i = 0; i < activeCues.length; i++) {
let activeCue = activeCues[i];
console.log('Cue runs from ' + activeCue.startTime +
' to ' + activeCue.endTime);
}
});
`
##### overrideNative
* Type: boolean
* can be used as an initialization option
Try to use videojs-contrib-hls even on platforms that provide some
level of HLS support natively. There are a number of platforms that
technically play back HLS content but aren't very reliable or are
missing features like CEA-608 captions support. When overrideNative
is true, if the platform supports Media Source Extensions
videojs-contrib-hls will take over HLS playback to provide a more
consistent experience.
__NOTE__: If you use this option, you must also set
videojs.options.html5.nativeAudioTracks andvideojs.options.html5.nativeVideoTracks tofalse. videojs-contrib-hls relies on audio and video tracks to play
streams with alternate audio and requires additional capabilities only
supported by non-native tracks in video.js.
##### blacklistDuration
* Type: number
* can be used as an initialization option
When the blacklistDuration property is set to a time duration in seconds,
if a playlist is blacklisted, it will be blacklisted for a period of that
customized duration. This enables the blacklist duration to be configured
by the user.
##### bandwidth
* Type: number
* can be used as an initialization option
When the bandwidth property is set (bits per second), it will be used in
the calculation for initial playlist selection, before more bandwidth
information is seen by the player.
##### enableLowInitialPlaylist
* Type: boolean
* can be used as an initialization option
When enableLowInitialPlaylist is set to true, it will be used to selectfalse
the lowest bitrate playlist initially. This helps to decrease playback start time.
This setting is by default.
`javascript`
var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls;
If you were thinking about modifying runtime properties in a
video.js plugin, we'd recommend you avoid it. Your plugin won't work
with videos that don't use videojs-contrib-hls and the best plugins
work across all the media types that video.js supports. If you're
deploying videojs-contrib-hls on your own website and want to make a
couple tweaks though, go for it!
#### hls.playlists.master
Type: object
An object representing the parsed master playlist. If a media playlist
is loaded directly, a master playlist with only one entry will be
created.
#### hls.playlists.media
Type: function
A function that can be used to retrieve or modify the currently active
media playlist. The active media playlist is referred to when
additional video data needs to be downloaded. Calling this function
with no arguments returns the parsed playlist object for the active
media playlist. Calling this function with a playlist object from the
master playlist or a URI string as specified in the master playlist
will kick off an asynchronous load of the specified media
playlist. Once it has been retreived, it will become the active media
playlist.
#### hls.segmentXhrTime
Type: number
The number of milliseconds it took to download the last media segment.
This value is updated after each segment download completes.
#### hls.bandwidth
Type: number
The number of bits downloaded per second in the last segment download.
This value is used by the default implementation of selectPlaylist
to select an appropriate bitrate to play.
Before the first video segment has been downloaded, it's hard to
estimate bandwidth accurately. The HLS tech uses a heuristic based on
the playlist download times to do this estimation by default. If you
have a more accurate source of bandwidth information, you can override
this value as soon as the HLS tech has loaded to provide an initial
bandwidth estimate.
#### hls.bytesReceived
Type: number
The total number of content bytes downloaded by the HLS tech.
#### hls.selectPlaylist
Type: function
A function that returns the media playlist object to use to download
the next segment. It is invoked by the tech immediately before a new
segment is downloaded. You can override this function to provide your
adaptive streaming logic. You must, however, be sure to return a valid
media playlist object that is present in player.hls.master.
Overridding this function with your own is very powerful but is overkill
for many purposes. Most of the time, you should use the much simpler
function below to selectively enable or disable a playlist from the
adaptive streaming logic.
#### hls.representations
Type: function
It is recommended to include the videojs-contrib-quality-levels plugin to your page so that videojs-contrib-hls will automatically populate the QualityLevelList exposed on the player by the plugin. You can access this list by calling player.qualityLevels(). See the videojs-contrib-quality-levels project page for more information on how to use the api.
Example, only enabling representations with a width greater than or equal to 720:
`javascript
var qualityLevels = player.qualityLevels();
for (var i = 0; i < qualityLevels.length; i++) {
var quality = qualityLevels[i];
if (quality.width >= 720) {
quality.enabled = true;
} else {
quality.enabled = false;
}
}
`
If including videojs-contrib-quality-levels is not an option, you can use the representations api. To get all of the available representations, call the representations() method on player.hls. This will return a list of plain objects, each with width, height, bandwidth, and id properties, and an enabled() method.
`javascript`
player.hls.representations();
To see whether the representation is enabled or disabled, call its enabled() method with no arguments. To set whether it is enabled/disabled, call its enabled() method and pass in a boolean value. Calling will allow the adaptive bitrate algorithm to select the representation while calling will disallow any selection of that representation.
Example, only enabling representations with a width greater than or equal to 720:
`javascript`
player.hls.representations().forEach(function(rep) {
if (rep.width >= 720) {
rep.enabled(true);
} else {
rep.enabled(false);
}
});
#### hls.xhr
Type: function
The xhr function that is used by HLS internally is exposed on the per-
player hls object. While it is possible, we do not recommend replacingxhr
the function with your own implementation. Instead, the providesbeforeRequest
the ability to specify a function that will be called
with an object containing the options that will be used to create the
xhr request.
Example:
`javascript
player.hls.xhr.beforeRequest = function(options) {
options.uri = options.uri.replace('example.com', 'foo.com');
return options;
};
`
The global videojs.Hls also exposes an xhr property. Specifying abeforeRequest function on that will allow you to intercept the options
for all requests in every player on a page. For consistency across
browsers the video source should be set at runtime once the video player
is ready.
Example
`javascript
videojs.Hls.xhr.beforeRequest = function(options) {
/*
* Modifications to requests that will affect every player.
*/
return options;
};
var player = videojs('video-player-id');
player.ready(function() {
this.src({
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
});
});
`
For information on the type of options that you can modify see the
documentation at https://github.com/Raynos/xhr.
#### loadedmetadata
Fired after the first segment is downloaded for a playlist. This will not happen
until playback if video.js's metadata setting is none
Usage tracking events are fired when we detect a certain HLS feature, encoding setting,
or API is used. These can be helpful for analytics, and to pinpoint the cause of HLS errors.
For instance, if errors are being fired in tandem with a usage event indicating that the
player was playing an AES encrypted stream, then we have a possible avenue to explore when
debugging the error.
Note that although these usage events are listed below, they may change at any time without
a major version change.
HLS usage events are triggered on the tech with the exception of the 3 hls-reload-error
events, which are triggered on the player.
#### Presence Stats
Each of the following usage events are fired once per source if (and when) detected:
| Name | Description |
| ------------- | ------------- |
| hls-webvtt | master manifest has at least one segmented WebVTT playlist |
| hls-aes | a playlist is AES encrypted |
| hls-fmp4 | a playlist used fMP4 segments |
| hls-demuxed | audio and video are demuxed by default |
| hls-alternate-audio | alternate audio available in the master manifest |
| hls-playlist-cue-tags | a playlist used cue tags (see useCueTags(#usecuetags) for details) |
#### Use Stats
Each of the following usage events are fired per use:
| Name | Description |
| ------------- | ------------- |
| hls-gap-skip | player skipped a gap in the buffer |
| hls-player-access | player.hls was accessed |
| hls-audio-change | a user selected an alternate audio stream |
| hls-rendition-disabled | a rendition was disabled |
| hls-rendition-enabled | a rendition was enabled |
| hls-rendition-blacklisted | a rendition was blacklisted |
| hls-timestamp-offset | a timestamp offset was set in HLS (can identify discontinuities) |
| hls-unknown-waiting | the player stopped for an unknown reason and we seeked to current time try to address it |
| hls-live-resync | playback fell off the back of a live playlist and we resynced to the live point |
| hls-video-underflow | we seeked to current time to address video underflow |
| hls-error-reload-initialized | the reloadSourceOnError plugin was initialized |
| hls-error-reload | the reloadSourceOnError plugin reloaded a source |
| hls-error-reload-canceled | an error occurred too soon after the last reload, so we didn't reload again (to prevent error loops) |
`javascript`
cue.value.data
There are lots of guides and references to using text tracks around
the web.
text track. You can get the metadata of the currently rendered segment by looking at the
track's array. The metadata will be attached to the cue.value property and
will have this structure`javascript
cue.value = {
byteLength, // The size of the segment in bytes
bandwidth, // The peak bitrate reported by the segment's playlist
resolution, // The resolution reported by the segment's playlist
codecs, // The codecs reported by the segment's playlist
uri, // The Segment uri
timeline, // Timeline of the segment for detecting discontinuities
playlist, // The Playlist uri
start, // Segment start time
end // Segment end time
};
`Example:
Detect when a change in quality is rendered on screen
javascript
let tracks = player.textTracks();
let segmentMetadataTrack;for (let i = 0; i < tracks.length; i++) {
if (tracks[i].label === 'segment-metadata') {
segmentMetadataTrack = tracks[i];
}
}
let previousPlaylist;
if (segmentMetadataTrack) {
segmentMetadataTrack.on('cuechange', function() {
let activeCue = segmentMetadataTrack.activeCues[0];
if (activeCue) {
if (previousPlaylist !== activeCue.value.playlist) {
console.log('Switched from rendition ' + previousPlaylist +
' to rendition ' + activeCue.value.playlist);
}
previousPlaylist = activeCue.value.playlist;
}
});
}
`Hosting Considerations
Unlike a native HLS implementation, the HLS tech has to comply with
the browser's security policies. That means that all the files that
make up the stream must be served from the same domain as the page
hosting the video player or from a server that has appropriate CORS
headers
configured. Easy instructions are
available for popular webservers
and most CDNs should have no trouble turning CORS on for your account.
Known Issues
Issues that are currenty know about with workarounds. If you want to
help find a solution that would be appreciated!$3
As of version 5.0.0, IE10 and below are no longer supported.$3
Edge has native support for HLS but only in the MPEG2-TS container. If
you attempt to play an HLS stream with fragmented MP4 segments, Edge
will stall. Fragmented MP4s are only supported on browser that have
Media Source Extensions available.$3
For testing, you run
. This will run tests using any of the
browsers that karma-detect-browsers detects on your machine.Release History
Check out the changelog for a summary of each release.Building
To build a copy of videojs-contrib-hls run the following commands`bash
git clone https://github.com/videojs/videojs-contrib-hls
cd videojs-contrib-hls
npm i
npm run build
`videojs-contrib-hls will have created all of the files for using it in a dist folder
Development
$3
* Download stream locally with the HLS Fetcher
* Simulate errors with Murphy$3
All commands for development are listed in the file and are run using
`bash
npm run
``[slack-icon]: http://slack.videojs.com/badge.svg
[slack-link]: http://slack.videojs.com
[travis-icon]: https://travis-ci.org/videojs/videojs-contrib-hls.svg?branch=master
[travis-link]: https://travis-ci.org/videojs/videojs-contrib-hls
[greenkeeper-icon]: https://badges.greenkeeper.io/videojs/videojs-contrib-hls.svg
[greenkeeper-link]: https://greenkeeper.io/