php stream_select w3c,http-streaming

videojs-http-streaming (VHS)

Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not

natively supported.

Included in video.js 7 by default! See the video.js 7 blog post

Maintenance Status: Stable

Video.js Compatibility: 6.0, 7.0

Table of Contents generated with DocToc

Installation

NPM

To install videojs-http-streaming with npm run

npm install --save @videojs/http-streaming

CDN

Select a version of VHS from the CDN

Releases

Manual Build

Download a copy of this git repository and then follow the steps in Building

Contributing

Troubleshooting

Talk to us

Drop by our slack channel (#playback) on the Video.js slack.

Getting Started

This library is included in video.js 7 by default, if you are using an older version of video.js then

get a copy of videojs-http-streaming and include it in your page along with video.js:

src="https://example.com/index.m3u8"

type="application/x-mpegURL">

var player = videojs('vid1');

player.play();

Check out our live example if you're having trouble.

Is it recommended to use the element or load a source with player.src(sourceObject) in order to prevent the video element from playing the source natively where HLS is supported.

Compatibility

Via MSE

Chrome

Firefox

Internet Explorer 11 Windows 10 or 8.1

Using the overrideNative option

Chrome Android

Edge

Native only

Mac Safari

iOS Safari

Flash Support

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.

DRM

DRM is supported through videojs-contrib-eme. In order to use DRM, include the videojs-contrib-eme plug, initialize it, and add options to either the plugin or the source.

Detailed option information can be found in the videojs-contrib-eme README.

Documentation

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:

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.

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:

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

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.

Options

How to use

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:

// html5 for html hls

videojs(video, {

html5: {

hls: {

withCredentials: true

}

}

});

Source

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

});

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

handleManifestRedirects

Type: boolean

Default: false

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 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:

lettextTracks = player.textTracks();

letcuesTrack;

for (let i = 0; i < textTracks.length; i++) {

if (textTracks[i].label === 'ad-cues') {

cuesTrack = textTracks[i];

}

}

cuesTrack.addEventListener('cuechange', function() {

letactiveCues = 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-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.

// via the constructor

var player = videojs('playerId', {

html5: {

hls: {

overrideNative: true

}

}

});

// via the source

var player = videojs('playerId');

player.src({

src: 'https://example.com/index.m3u8',

type: 'application/x-mpegURL',

overrideNative: true

});

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.

useBandwidthFromLocalStorage

Type: boolean

can be used as an initialization option

If true, bandwidth and throughput values are stored in and retrieved from local

storage on startup (for initial rendition selection). This setting is false by default.

enableLowInitialPlaylist

Type: boolean

can be used as an initialization option

When 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.

limitRenditionByPlayerDimensions

Type: boolean

can be used as an initialization option

useDevicePixelRatio

Type: boolean

can be used as an initialization option.

If true, this will take the device pixel ratio into account when doing rendition switching. This means that if you have a player with the width of 540px in a high density display with a device pixel ratio of 2, a rendition of 1080p will be allowed.

This setting is false by default.

When limitRenditionByPlayerDimensions is set to true, rendition

selection logic will take into account the player size and rendition

resolutions when making a decision.

This setting is true by default.

smoothQualityChange

Type: boolean

can be used as a source option

can be used as an initialization option

When the smoothQualityChange property is set to true, a manual quality

change triggered via the representations API will use

smooth quality switching rather than the default fast (buffer-ejecting)

quality switching. Using smooth quality switching will mean no loading spinner

will appear during quality switches, but will cause quality switches to only

be visible after a few seconds.

Note that this only affects quality changes triggered via the representations

API; automatic quality switches based on available bandwidth will always be

smooth switches.

allowSeeksWithinUnsafeLiveWindow

Type: boolean

can be used as a source option

When allowSeeksWithinUnsafeLiveWindow is set to true, if the active playlist is live

and a seek is made to a time between the safe live point (end of manifest minus three

times the target duration,

see the hls spec

for details) and the end of the playlist, the seek is allowed, rather than corrected to

the safe live point.

This option can help in instances where the live stream's target duration is greater than

the segment durations, playback ends up in the unsafe live window, and there are gaps in

the content. In this case the player will attempt to seek past the gaps but end up seeking

inside of the unsafe range, leading to a correction and seek back into a previously played

content.

The property defaults to false.

customTagParsers

Type: Array

can be used as a source option

With customTagParsers you can pass an array of custom m3u8 tag parser objects. See https://github.com/videojs/m3u8-parser#custom-parsers

customTagMappers

Type: Array

can be used as a source option

Similar to customTagParsers, with customTagMappers you can pass an array of custom m3u8 tag mapper objects. See https://github.com/videojs/m3u8-parser#custom-parsers

cacheEncryptionKeys

Type: boolean

can be used as a source option

can be used as an initialization option

This option forces the player to cache AES-128 encryption keys internally instead of requesting the key alongside every segment request.

This option defaults to false.

Runtime Properties

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!

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.systemBandwidth

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)

hls.bandwidth

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.

hls.throughput

Type: number

The number of bits decrypted, transmuxed, and appended per second as a cumulative average across active processing time.

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-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 .enabled(true) will allow the adaptive bitrate algorithm to select the representation while calling .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);

}

});

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

hls.stats

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

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

Events

Standard HTML video events are handled by video.js automatically and

are triggered on the player object.

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

HLS Usage Events

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)

hls-bandwidth-from-local-storage

starting bandwidth was retrieved from local storage (see useBandwidthFromLocalStorage(#useBandwidthFromLocalStorage) for details)

hls-throughput-from-local-storage

starting throughput was retrieved from local storage (see useBandwidthFromLocalStorage(#useBandwidthFromLocalStorage) 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)

In-Band Metadata

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.

Segment Metadata

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 = {

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

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 known. If you want to

help find a solution that would be appreciated!

Fragmented MP4 Support

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.

Testing

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.

Debugging

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.

Release History

Check out the changelog for a summary of each release.

Building

To build a copy of videojs-http-streaming run the following commands

git clone https://github.com/videojs/http-streaming

cdhttp-streaming

npm i

npm run build

videojs-http-streaming will have created all of the files for using it in a dist folder

Development

Tools

Download stream locally with the HLS Fetcher

Simulate errors with Murphy

Inspect content with Thumbcoil

Commands

All commands for development are listed in the package.json file and are run using

npm run