yang-f/hls.js

Join the discussion:

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 and AAC/MP3 streams into ISO BMFF (MP4) fragments. This transmuxing could be performed asynchronously using Web Worker if available in the browser. hls.js also supports HLS + fmp4, as announced during WWDC2016

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://video-dev.github.io/hls.js/demo

Getting Started

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.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.attachMedia(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.

they use hls.js in production !

Player Integration

hls.js is (being) integrated in the following players:

Akamai Adaptive Media Player (AMP)
Clappr
Flowplayer through flowplayer-hlsjs
MediaElement.js
Videojs through Videojs-hlsjs
Videojs through videojs-hls.js. hls.js is integrated as a SourceHandler -- new feature in Video.js 5.
Videojs through videojs-contrib-hls.js. Production ready plug-in with full fallback compatibility built-in.

Chrome/Firefox integration

made by gramk,plays hls from address bar and m3u8 links

Chrome native-hls
Firefox native-hls

Dependencies

No external JS libs are needed. Prepackaged build is included in the dist folder:

If you want to bundle the application yourself, use node

npm install hls.js

NOTE: hls.light.*.js dist files do not include subtitling and alternate-audio features.

Installation

Either directly include dist/hls.js or dist/hls.min.js

Or type

npm install --save hls.js

Optionally there is a declaration file available to help with code completion and hinting within your IDE for the hls.js api

npm install --save-dev @types/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 Android 41+
Firefox for Desktop 42+
IE11+ for Windows 8.1+
Edge for Windows 10+
Opera for Desktop
Vivaldi for Desktop
Safari for Mac 8+ (beta)

CORS

All HLS resources must be delivered with CORS headers permitting GET requests.

Features

VoD & Live playlists
- DVR support on Live playlists
fragmented MP4 container (beta)
MPEG-2 TS container
- ITU-T Rec. H.264 and ISO/IEC 14496-10 Elementary Stream
- ISO/IEC 13818-7 ADTS AAC Elementary Stream
- ISO/IEC 11172-3 / ISO/IEC 13818-3 (MPEG-1/2 Audio Layer III) Elementary Stream
- Packetized metadata (ID3) Elementary Stream
AAC container (audio only streams)
Timed Metadata for HTTP Live Streaming (in ID3 format, carried in MPEG-2 TS)
AES-128 decryption
SAMPLE-AES decryption
CEA-608/708 captionss
WebVTT subtitles
Alternate Audio Track Rendition (Master Playlist with alternative Audio) for VoD and 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
Redundant/Failover Playlists

Not Supported (Yet)

MPEG Audio container (MPEG-1/2 Audio Layer III audio only streams)
MP3 Elementary Stream in Edge for Windows 10+

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
#EXT-X-DISCONTINUITY-SEQUENCE
#EXT-X-BYTERANGE
#EXT-X-MAP
#EXT-X-KEY (https://tools.ietf.org/html/draft-pantos-http-live-streaming-08#section-3.4.4)
#EXT-X-PROGRAM-DATE-TIME (https://tools.ietf.org/html/draft-pantos-http-live-streaming-18#section-4.3.2.6)
EXT-X-START:TIME-OFFSET=x (https://tools.ietf.org/html/draft-pantos-http-live-streaming-18#section-4.3.5.2)

API and Configuration Parameters

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

License

hls.js is released under Apache 2.0 License

Contributing

Pull requests are welcome. Here is a quick guide on how to start.

First, checkout the repository and install required dependencies

git clone https://github.com/video-dev/hls.js.git
# setup dev environement
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

Use EditorConfig or at least stay consistent to the file formats defined in the .editorconfig file.
Develop in a topic branch, not master
Don't commit the updated dist/hls.js file in your PR. We'll take care of generating an updated build right before releasing a new tagged version.

Design

Click here for details.

yang-f / hls.js