Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/gem-mine/hls.js

fork form https://github.com/video-dev/hls.js; add custom key process
https://github.com/gem-mine/hls.js
Last synced: about 1 month ago
JSON representation
fork form https://github.com/video-dev/hls.js; add custom key process
Host: GitHub
URL: https://github.com/gem-mine/hls.js
Owner: gem-mine
License: other
Created: 2020-06-11T07:39:01.000Z (over 4 years ago)
Default Branch: v0.13.2-custom-key
Last Pushed: 2023-07-13T12:32:05.000Z (over 1 year ago)
Last Synced: 2024-04-13T19:06:05.303Z (9 months ago)
Language: JavaScript
Size: 74.6 MB
Stars: 0
Watchers: 6
Forks: 0
Open Issues: 4
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

README

        [![Build Status](https://api.travis-ci.org/video-dev/hls.js.svg?branch=master)](https://travis-ci.org/video-dev/hls.js)

[![npm](https://img.shields.io/npm/v/hls.js.svg?style=flat)](https://npmjs.org/package/hls.js)

[![npm](https://img.shields.io/npm/v/hls.js/canary.svg?style=flat)](https://www.npmjs.com/package/hls.js/v/canary)

[![](https://data.jsdelivr.com/v1/package/npm/hls.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/hls.js)

[![](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)

Join the discussion via [video-dev.org](http://video-dev.org) in #hlsjs (our Slack channel)

# ![hls.js](https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png)

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](https://developer.apple.com/videos/play/wwdc2016/504/)

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

hls.js is written in [ECMAScript6] (`*.js`) and [TypeScript] (`*.ts`) (strongly typed superset of ES6), and transpiled in ECMAScript5 using the [TypeScript compiler].

Modules written in TS and plain JS/ES6 can be interdependent and imported/required by each other.

To build our distro bundle and serve our development environment we use [Webpack].

[HTML5 video]: http://www.html5rocks.com/en/tutorials/video/basics/

[MediaSource Extensions]: http://w3c.github.io/media-source/

[HTTP Live Streaming]: http://en.wikipedia.org/wiki/HTTP_Live_Streaming

[Web Worker]: http://caniuse.com/#search=worker

[ECMAScript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials

[TypeScript]: https://www.typescriptlang.org/

[TypeScript compiler]: https://www.typescriptlang.org/docs/handbook/compiler-options.html

[Webpack]: https://webpack.js.org/

## API docs and usage guide

* [API and usage docs, with code examples](./docs/API.md)

* [Auto-Generated Docs (Latest Release)](https://hls-js.netlify.com/api-docs)

* [Auto-Generated Docs (Master)](https://hls-js-latest.netlify.com/api-docs)

_Note you can access the docs for a particular version using "[https://github.com/video-dev/hls.js/blob/deployments/README.md](https://github.com/video-dev/hls.js/blob/deployments/README.md)"_

## Demo

### Latest Release

[https://hls-js.netlify.com/demo](https://hls-js.netlify.com/demo)

### Master

[https://hls-js-latest.netlify.com/demo](https://hls-js-latest.netlify.com/demo)

### Specific Version

Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.md](https://github.com/video-dev/hls.js/blob/deployments/README.md).

## Getting Started

```html

  var video = document.getElementById('video');

  if (Hls.isSupported()) {

    var hls = new Hls();

    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');

    hls.attachMedia(video);

    hls.on(Hls.Events.MANIFEST_PARSED, function() {

      video.play();

    });

  }

  // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.

  // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.

  // This is using the built-in support of the plain video element, without using hls.js.

  // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven

  // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.

  else if (video.canPlayType('application/vnd.apple.mpegurl')) {

    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';

    video.addEventListener('loadedmetadata', function() {

      video.play();

    });

  }

```

## Video Control

Video is controlled through HTML `````` element.

HTMLVideoElement control and events could be used seamlessly.

## They use hls.js in production!

|[](http://www.adultswim.com/videos/streams)|[](https://www.akamai.com)|[](https://www.canalplus.fr)|[](http://www.dailymotion.com)|

|---|---|---|---|

|[](https://freshlive.tv)|[](http://www.flowplayer.org)|[](https://www.foxsports.com.au)|[](http://www.globo.com)|

|[](https://gunosy.com)|[](https://www.gl-systemhaus.de/)|[](http://nettrek.de/)|[](https://www.nytimes.com/)|

|[](https://www.peer5.com/)|[](http://qbrick.com/)|[](https://www.radiantmediaplayer.com/)|[](http://www.rts.ch/)|

|[](https://www.snapstream.com/)|[](https://www.streamamg.com/)|[](https://streamshark.io/)|[](http://my.tablotv.com/)|

|[](https://www.streamroot.io/)|[](https://www.ted.com/)|[](https://twitter.com/)|[](https://www.clevercast.com)|

|[](https://www.viacom.com/)|[](https://vk.com/)|[](https://www.jwplayer.com)|[](https://www.france.tv)|

|[](https://tech.showmax.com)|[](https://www.1tv.ru/) | [](https://www.zdf.de) | [](https://github.com/cdnbye/hlsjs-p2p-engine)| |

|[](https://streaming.cdn77.com/)| [](https://r7.com/)|[](https://github.com/Novage/p2p-media-loader)|[](https://kayosports.com.au)

|[](https://flosports.tv)

## Player Integration

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

 - [Akamai Adaptive Media Player (AMP)](https://www.akamai.com/us/en/solutions/products/media-delivery/adaptive-media-player.jsp)

 - [Clappr](https://github.com/clappr/clappr)

 - [Flowplayer](https://www.flowplayer.org)  through [flowplayer-hlsjs](https://github.com/flowplayer/flowplayer-hlsjs)

 - [MediaElement.js](http://www.mediaelementjs.com)

 - [Videojs](http://videojs.com) through [Videojs-hlsjs](https://github.com/benjipott/videojs-hlsjs)

 - [Videojs](http://videojs.com) through [videojs-hls.js](https://github.com/streamroot/videojs-hls.js). hls.js is integrated as a SourceHandler -- new feature in Video.js 5.

 - [Videojs](http://videojs.com) through [videojs-contrib-hls.js](https://github.com/Peer5/videojs-contrib-hls.js). Production ready plug-in with full fallback compatibility built-in.

 - [Fluid Player](https://www.fluidplayer.com)

 - [OpenPlayerJS](https://www.openplayerjs.com), as part of the [OpenPlayer project](https://github.com/openplayerjs)

- [CDNBye](https://github.com/cdnbye/hlsjs-p2p-engine), a p2p engine for hls.js powered by WebRTC Datachannel. 

## Chrome/Firefox integration

made by [gramk](https://github.com/gramk/chrome-hls), plays hls from address bar and m3u8 links

 - Chrome [native-hls](https://chrome.google.com/webstore/detail/native-hls-playback/emnphkkblegpebimobpbekeedfgemhof)

 - Firefox [native-hls](https://addons.mozilla.org/en-US/firefox/addon/native_hls_playback/)

## Dependencies

No external JS libs are needed.

Prepackaged build is included [with the releases](https://github.com/video-dev/hls.js/releases).

If you want to bundle the application yourself, use node

```

npm install hls.js

```

or for the version from master (canary)

```

npm install hls.js@canary

```

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

```sh

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

```sh

npm install --save-dev @types/hls.js

```

## Compatibility

hls.js is compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mimetypes inputs.

Find a support matrix of the MediaSource API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

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)

Please note: iOS Safari "Mobile" does not support the MediaSource API. Safari browsers have however built-in HLS support through the plain video "tag" source URL. See the example above (Getting Started) to run appropriate feature detection and choose between using Hls.js or natively built-in HLS support.

When a platform has neither MediaSource nor native HLS support, you will not be able to play HLS.

### Server-side-rendering (SSR) and `require` from a Node.js runtime

We support this now. You can safely require this library in Node and absolutely nothing will happen :) See https://github.com/video-dev/hls.js/pull/1841

(This is also known as "Universal builds" and "isomorphic apps")

## CORS

All HLS resources must be delivered with [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) 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 (ID3v2.3.0) Elementary Stream

  - AAC container (audio only streams)

  - MPEG Audio container (MPEG-1/2 Audio Layer III audio only streams)

  - Timed Metadata for HTTP Live Streaming (in ID3 format, carried in MPEG-2 TS)

  - AES-128 decryption

  - SAMPLE-AES decryption (only supported if using MPEG-2 TS container)

  - Encrypted media extensions (EME) support for DRM (digital rights management)

    - Widevine CDM (beta/experimental) (see Shaka-package test-stream in demo)

  - CEA-608/708 captions

  - 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](https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming.html#//apple_ref/doc/uid/TP40008332-CH102-SW22)

## Not Supported (Yet)

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

## License

  hls.js is released under [Apache 2.0 License](LICENSE)

## Development and contributing - first steps

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

 - First, checkout the repository and install required dependencies

```sh

git clone https://github.com/video-dev/hls.js.git

# setup dev environment

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](http://editorconfig.org/) 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.

## Setup

After cloning or pulling from the repository, first of all, make sure your local node-modules are up-to-date with the package deps:

```

npm install

```

## Build system (Webpack)

Build all flavors:

```

npm install

npm run build

```

Only debug:

```

npm run build:debug

```

Build and watch

```

npm run build:watch

```

Only specific flavor (known configs are: debug, dist, light, light-dist, demo):

```

npm run build -- --env.dist # replace "dist" by other configuration name, see above ^

```

Note: The "demo" config is always built.

Build with bundle analyzer (to help optimize build size)

```

npm run build:analyze

```

## Linter (ESlint)

Run linter:

```

npm run lint

```

Run linter with auto-fix mode:

```

npm run lint:fix

```

Run linter with errors only (no warnings)

```

npm run lint:quiet

```

## Automated tests (Mocha/Karma)

Run all tests at once:

```

npm test

```

Run unit tests:

```

npm run test:unit

```

Run unit tests in watch mode:

```

npm run test:unit:watch

```

Run functional (integration) tests:

```

npm run test:func

```

## Design

Click [here](/docs/design.md) for details.

### Tested With

[](https://www.browserstack.com/)