@videojs/http-streaming
Advanced tools
Play back HLS with video.js, even where it's not natively supported
@videojs/http-streaming is a plugin for Video.js that allows you to play back HTTP-based streaming media, such as HLS (HTTP Live Streaming) and DASH (Dynamic Adaptive Streaming over HTTP). It provides a robust solution for adaptive bitrate streaming, ensuring smooth playback across various network conditions.
HLS Playback
This feature allows you to play HLS streams using Video.js. The code sample demonstrates how to set the source of the video player to an HLS playlist.
const player = videojs('my-video');
player.src({
src: 'https://example.com/path/to/your/hls/playlist.m3u8',
type: 'application/x-mpegURL'
});DASH Playback
This feature enables DASH streaming support. The code sample shows how to configure the video player to use a DASH manifest.
const player = videojs('my-video');
player.src({
src: 'https://example.com/path/to/your/dash/manifest.mpd',
type: 'application/dash+xml'
});Adaptive Bitrate Streaming
This feature ensures smooth playback by automatically adjusting the video quality based on the user's network conditions. The code sample demonstrates how to access the selected bitrate.
const player = videojs('my-video');
player.src({
src: 'https://example.com/path/to/your/stream.m3u8',
type: 'application/x-mpegURL'
});
player.on('loadedmetadata', function() {
console.log('Bitrate:', player.tech().hls.selectPlaylist().attributes.BANDWIDTH);
});hls.js is a JavaScript library that brings HLS to browsers with support for MSE (Media Source Extensions). It is highly configurable and provides fine-grained control over the streaming process. Compared to @videojs/http-streaming, hls.js is more focused on HLS and offers more customization options.
dash.js is an open-source JavaScript library for playing back DASH content. It is maintained by the DASH Industry Forum and provides extensive support for DASH features. While @videojs/http-streaming supports both HLS and DASH, dash.js is specialized for DASH and offers more advanced features for this protocol.
Shaka Player is an open-source JavaScript library for adaptive media streaming. It supports both HLS and DASH and offers a wide range of features, including offline playback and DRM support. Shaka Player is known for its robustness and extensive feature set, making it a strong alternative to @videojs/http-streaming.
Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported.
Lead Maintainers:
Maintenance Status: Stable
Table of Contents generated with DocToc
To install videojs-http-streaming with npm run
npm install --save @videojs/http-streaming
Select a version of VHS from the CDN
Download a release of videojs-http-streaming
Download a copy of this git repository and then follow the steps in Building
See CONTRIBUTING.md
Drop by our slack channel (#playback) on the Video.js slack.
Get a copy of videojs-http-streaming and include it in your page along with video.js:
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-http-streaming.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>
Check out our live example if you're having trouble.
This plugin does not support Flash playback. Instead, it is recommended that users use the videojs-flashls-source-handler plugin as a fallback option for browsers that don't have a native HLS/DASH player or support for Media Source Extensions.
HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android. There are a number of reasons independent of platform to recommend the format, though:
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. 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-http-streaming supports a bunch of HLS features. Here are some highlights:
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:
// html5 for html hls
videojs(video, {html5: {
hls: {
withCredentials: true
}
}});
// or
var options = {hls: {
withCredentials: true;
}};
videojs(video, {html5: options});
Some options, such as withCredentials can be passed in to hls during
player.src
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
});
booleanWhen the withCredentials property is set to true, all XHR requests for
manifests and segments would have withCredentials set to true as well. This
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
Access-Control-Allow-Origin header cannot be set to *, also, the response
headers require the addition of Access-Control-Allow-Credentials header which
is set to true.
See html5rocks's article
for more info.
booleanWhen the useCueTags property is set to true, a text track is created with
label 'ad-cues' and kind 'metadata'. The track is then added to
player.textTracks(). Changes in active cue may be
tracked by following the Video.js cue points API for text tracks. For example:
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);
}
});
booleanTry to use videojs-http-streaming 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-http-streaming 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 and
videojs.options.html5.nativeVideoTracks to
false. videojs-http-streaming 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.
numberWhen 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.
numberWhen 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.
booleanWhen enableLowInitialPlaylist is set to true, it will be used to select
the lowest bitrate playlist initially. This helps to decrease playback start time.
This setting is false by default.
Runtime properties are attached to the tech object when HLS is in use. You can get a reference to the HLS source handler like this:
var hls = player.tech().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-http-streaming and the best plugins work across all the media types that video.js supports. If you're deploying videojs-http-streaming on your own website and want to make a couple tweaks though, go for it!
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.
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.
Type: number
systemBandwidth is a combination of two serial processes' bitrates. The first
is the network bitrate provided by bandwidth and the second is the bitrate of
the entire process after that (decryption, transmuxing, and appending) provided
by throughput. This value is used by the default implementation of selectPlaylist
to select an appropriate bitrate to play.
Since the two process are serial, the overall system bandwidth is given by:
systemBandwidth = 1 / (1 / bandwidth + 1 / throughput)
Type: number
The number of bits downloaded per second in the last segment download.
Before the first video segment has been downloaded, it's hard to estimate bandwidth accurately. The HLS tech uses a starting value of 4194304 or 0.5 MB/s. 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.
Type: number
The number of bits decrypted, transmuxed, and appended per second as a cumulative average across active processing time.
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.
Type: function
It is recommended to include the videojs-contrib-quality-levels plugin to your page so that videojs-http-streaming 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:
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.
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 <representation>.enabled(true) will allow the adaptive bitrate algorithm to select the representation while calling <representation>.enabled(false) will disallow any selection of that representation.
Example, only enabling representations with a width greater than or equal to 720:
player.hls.representations().forEach(function(rep) {
if (rep.width >= 720) {
rep.enabled(true);
} else {
rep.enabled(false);
}
});
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 replacing
the function with your own implementation. Instead, the xhr provides
the ability to specify a beforeRequest function that will be called
with an object containing the options that will be used to create the
xhr request.
Example:
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 a
beforeRequest 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
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.
Type: object
This object contains a summary of HLS and player related stats.
| Property Name | Type | Description |
|---|---|---|
| bandwidth | number | Rate of the last segment download in bits/second |
| mediaRequests | number | Total number of media segment requests |
| mediaRequestsAborted | number | Total number of aborted media segment requests |
| mediaRequestsTimedout | number | Total number of timedout media segment requests |
| mediaRequestsErrored | number | Total number of errored media segment requests |
| mediaTransferDuration | number | Total time spent downloading media segments in milliseconds |
| mediaBytesTransferred | number | Total number of content bytes downloaded |
| mediaSecondsLoaded | number | Total number of content seconds downloaded |
| buffered | array | List of time ranges of content that are in the SourceBuffer |
| currentTime | number | The current position of the player |
| currentSource | object | The source object. Has the structure {src: 'url', type: 'mimetype'} |
| currentTech | string | The name of the tech in use |
| duration | number | Duration of the video in seconds |
| master | object | The master playlist object |
| playerDimensions | object | Contains the width and height of the player |
| seekable | array | List of time ranges that the player can seek to |
| timestamp | number | Timestamp of when hls.stats was accessed |
| videoPlaybackQuality | object | Media playback quality metrics as specified by the W3C's Media Playback Quality API |
Standard HTML video events are handled by video.js automatically and are triggered on the player object.
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.
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) |
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) |
The HLS tech supports timed metadata embedded as ID3 tags. When a stream is encountered with embedded metadata, an in-band metadata text track will automatically be created and populated with cues as they are encountered in the stream. UTF-8 encoded TXXX and WXXX ID3 frames are mapped to cue points and their values set as the cue text. Cues are created for all other frame types and the data is attached to the generated cue:
cue.value.data
There are lots of guides and references to using text tracks around the web.
You can get metadata about the segments currently in the buffer by using the segment-metadata
text track. You can get the metadata of the currently rendered segment by looking at the
track's activeCues array. The metadata will be attached to the cue.value property and
will have this structure
cue.value = {
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
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;
}
});
}
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.
Issues that are currenty known with workarounds. If you want to help find a solution that would be appreciated!
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.
For testing, you run npm run test. You will need Chrome and Firefox for running the tests.
videojs-http-streaming uses BrowserStack for compatibility testing.
videojs-http-streaming makes use of videojs.log for debug logging. You can enable these logs
by setting the log level to debug using videojs.log.level('debug'). You can access a complete
history of the logs using videojs.log.history(). This history is maintained even when the
log level is not set to debug.
hls.stats can also be helpful when debugging. Accessing this object will give you
a snapshot summary of various HLS and player stats. See hls.stats for details
about what this object contains.
NOTE: The debug level is only available in video.js v6.6.0+. With earlier versions of
video.js, no debug messages will be logged to console.
Check out the changelog for a summary of each release.
To build a copy of videojs-http-streaming run the following commands
git clone https://github.com/videojs/http-streaming
cd http-streaming
npm i
npm run build
videojs-http-streaming will have created all of the files for using it in a dist folder
All commands for development are listed in the package.json file and are run using
npm run <command>
FAQs
Play back HLS and DASH with Video.js, even where it's not natively supported
The npm package @videojs/http-streaming receives a total of 293,215 weekly downloads. As such, @videojs/http-streaming popularity was classified as popular.
We found that @videojs/http-streaming demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 194 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.