hls.js

hls.js is a JavaScript library which implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.

it works by transmuxing MPEG-2 Transport Stream into ISO BMFF (MP4) fragments. this transmuxing could be performed asynchronously using Web Worker if available in the browser.

hls.js does not need any player, it works directly on top of a standard HTML<video>element.

hls.js is written in ECMAScript6, and transpiled in ECMAScript5 using Babel.

Demo

http://gdupontavice.dev.dailymotion.com/hls.js/demo/index.html

Dependencies

No external JS libs are needed. prepackaged build is included in the [dist] (dist) folder:

• [hls.js] (dist/hls.js)
• [hls.min.js] (dist/hls.min.js)

if you want to bundle the application yourself, use node

git clone https://github.com/dailymotion/hls.js.git
# setup dev environnement
cd hls.js
npm install
# build dist/hls.js, watch file change for rebuild and launch demo page
npm run dev
# lint
npm run lint
# minify
npm run minify

Installation

either directly include

dist/hls.jsordist/hls.min.js or

npm install --save https://github.com/dailymotion/hls.js

compatibility

hls.js is compatible with browsers supporting MSE with 'video/MP4' inputs. as of today, it is supported on:

• Chrome for Android 34+
• Chrome for Desktop 34+
• Firefox for Desktop 38+ (with media.mediasource.whitelist=false in about:config)
• IE11+ for Windows 8.1
• Safari for Mac 8+ (beta)

Features

• VoD & Live playlists
  • DVR support on Live playlists
• Adaptive streaming
  • Manual & Auto Quality Switching
    • 3 Quality Switching modes are available (controllable through API means)
      • instant switching (immediate quality switch at current video position)
      • smooth switching (quality switch for next loaded fragment)
      • bandwidth conservative switching (quality switch change for next loaded fragment, without flushing the buffer)
    • in Auto-Quality mode, emergency switch down in case bandwidth is suddenly dropping to minimize buffering.
• Accurate Seeking on VoD & Live (not limited to fragment or keyframe boundary)
• ability to seek in buffer and back buffer without redownloading segments
• Built-in Analytics
  • every internal events could be monitored (Network Events,Video Events)
  • playback session metrics are also exposed
• resilience to errors
  • retry mechanism embedded in the library
  • recovery actions could be triggered fix fatal media or network errors

Supported M3U8 tags

• #EXTM3U
• #EXTINF
• #EXT-X-STREAM-INF (adaptive streaming)
• #EXT-X-ENDLIST (Live playlist)
• #EXT-X-MEDIA-SEQUENCE
• #EXT-X-TARGETDURATION
• #EXT-X-DISCONTINUITY

Getting Started

<script src="dist/hls.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachVideo(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

Video Control

video is controlled through HTML <video> element.

HTMLVideoElement control and events could be used seamlessly.

API and Configuration Parameters

hls.js can be configured and controlled easily, click here for details.

Design

click here for details.