Name Last Update
docs Loading commit data...
libs/qunit Loading commit data...
src Loading commit data...
test Loading commit data...
.gitignore Loading commit data...
.jshintrc Loading commit data...
.npmignore Loading commit data...
.travis.yml Loading commit data...
CONTRIBUTING.md Loading commit data...
Gruntfile.js Loading commit data...
LICENSE Loading commit data...
README.md Loading commit data...
example.html Loading commit data...
package.json Loading commit data...

video.js HLS Plugin

A video.js plugin that plays HLS video on platforms that don't support it but have Flash.

Build Status

Getting Started

Download the plugin. On your web page:

<script src="video.js"></script>
<script src="videojs-hls.min.js"></script>
<script>
  var player = videojs('video');
  player.hls('http://example.com/video.m3u8');
  player.play();
</script>

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 plugin attempts to address that situation by providing a polyfill for HLS on browsers that have Flash support. 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.

The videojs-hls plugin is still working towards a 1.0 release so it may not fit your requirements today. Specifically, there is no support for:

  • Alternate audio and video tracks
  • Subtitles
  • Segment codecs other than H.264 with AAC audio
  • Internet Explorer < 10

Runtime Properties

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

player.hls.media

Type: object

An object representing the currently selected media playlist. This is the playlist that is being referred to when a additional video data needs to be downloaded.

player.hls.mediaIndex

Type: number

The index of the next video segment to be downloaded from player.hls.media.

player.hls.selectPlaylist

Type: function

A function that returns the media playlist object to use to download the next segment. It is invoked by the plugin 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.

Events

loadedmetadata

Fired after the first media playlist is downloaded for a stream.

loadedmanifest

Fired immediately after a new master or media playlist has been downloaded. By default, the plugin only downloads playlists as they are needed.

Hosting Considerations

Unlike a native HLS implementation, the HLS plugin 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.

MBR Rendition Selection Logic

In situations where manifests have multiple renditions, the player will go through the following algorithm to determine the best rendition by bandwidth and viewport dimensions.

  • Start on index 0 as defined in the HLS Spec (link above)
  • On a successful load complete per segment determine the following;
    • player.hls.bandwidth set to value as segment byte size over download time
    • Viewport width/height as determined by player.width()/player.height()
    • Playlists mapped and sorted by BANDWIDTH less than or equal to 1.1x player.hls.bandwidth
    • Best playlist variant by BANDWIDTH determined
    • Subset of bandwidth appropriate renditions mapped
    • Subset validated for RESOLUTION attributes less than or equal to player dimensions
    • Best playlist variant by RESOLUTION determined
  • Result is as follows;
    • [Best RESOLUTION variant] OR [Best BANDWIDTH variant] OR [inital playlist in manifest]

Release History

  • 0.4.0: Live stream support
  • 0.3.0: Performance fixes for high-bitrate streams
  • 0.2.0: Basic playback and adaptive bitrate selection
  • 0.1.0: Initial release