NalinLuthra/rx-player

DASH/Smooth HTML5 Video Player

📖 API documentation - ⏯ Demo - 🎓 Tutorials - 🔧 Contributing

The RxPlayer is a library implementing a DASH and Microsoft Smooth Streaming video player directly on the browser, without plugins. It relies on HTML5 Media Source Extensions and Encrypted Media extensions and is written in TypeScript, a superset of JavaScript.

It is currently used in production for premium services and targets several devices, such as computers, phones, but also set-top-boxes, smart TVs and other peculiar environments.

Its main goals are:

• To play live and On Demand Smooth and DASH contents for extended amounts of time, with or without DRM

• To offer a first-class user experience (best quality without any buffering, low latency...)

• To be configurable and extendable (e.g. for Peer-to-Peer streaming, STB integration...)

• To be easy to integrate and use as a library in various codebases.

API

We documented the API in every little details in the API documentation.

You can also refer to the documentation of our previous versions here

These documentation pages are automatically generated from the content of the doc/api directory in this repository.

Demo

You can view our online Demo, built from our last version, here.

This demo is a small application written in React demonstrating a simple usage of the player.

Demo pages for our previous versions are also available here.

How to use it?

The fastest way to use the player directly in your code is to add this repository as a dependency. You can do it via npm:

npm install --save rx-player

You can then directly import and use the RxPlayer in your code:

// import it ES6 style:
import RxPlayer from "rx-player";

// same in CommonJS style:
// const RxPlayer = require("rx-player");

// instantiate it
const player = new RxPlayer({
  videoElement: document.querySelector("video")
});

// play a video
player.loadVideo({
  url: "http://vm2.dashif.org/livesim-dev/segtimeline_1/testpic_6s/Manifest.mpd",
  transport: "dash",
  autoPlay: true
});

We've also written short tutorials to help you familiarize with the RxPlayer API:

• Quick start into the API.
• Playing contents with DRMs.
• Selecting a track
• Listening to events contained in the content

Minimal Builds

To reduce the size of the final code, you might also want to import a minimal version of the player and only import the features you need. This is documented here :

import RxPlayer from "rx-player/minimal";
import { DASH, EME } from "rx-player/features";

// Allow to play encrypted DASH contents
RxPlayer.addFeatures([DASH, EME]);

Your questions

You can ask directly your questions about the project on our gitter. We will try our best to answer them as quickly as possible.

Contribute

Details on how to contribute is written in the CONTRIBUTING.md file at the root of this repository.

If you need more information, you can contact us via our gitter room.

We also began to add a little architecture documentation here . Those pages are automatically generated from the content of the doc/architecture directory.

Dependencies

After cloning our repo, you should first install our dependencies via npm:

npm install

Build

We use npm scripts to bundle, lint and test the player. Here are some examples:

# build the player in dist/rx-player.js
npm run build

# lint the code with tslint
npm run lint

# launch the demo on a local server (http://127.0.0.1:8000)
npm run start

# launch our test suite on various browsers
npm run test

# list all available npm scripts
npm run info

Builds are included in the dist/ directory (builds based on the last version are already included there).

Why a new player?

A need for an advanced media player

Canal+ Group is a media company with many advanced needs when it comes to media playback: it provides both live and VoD stream with many encryption requirements, supports a very large panel of devices and has many other specificities (like adult content restrictions, ad-insertion, Peer-To-Peer integration...).

When the time came to switch from a plugin-based web player approach to an HTML5 one back in 2015, no media player had the key features we wanted, and including those needs into an already existing media player would not be straightforward either.

The R&D department of Canal+ Group thus started to work on a new featureful media-player: the RxPlayer. To both help and profit from the community, it also decided to share it to everyone under a permissive open-source licence.

Now, more than 5 years later, the RxPlayer continues to evolve at the same fast pace to include a lot of features we don't find in other media players. You can look at our API documentation, tutorials and our demo page (an RxPlayer instance is available in the console through the global player variable there) to see if it matches your need.

Our approach

As media players rely a lot on asynchronous interactions with the outside world (HTTP requests, browser events, CDM messages), we felt that we could profit a lot by adopting reactive programming patterns with the help of the RxJS library. The abstractions provided by this library and the inclusion of cancellation mechanisms (unlike say, ES6 Promises) were perfectly adapted to some of our IO-heavy code.

With the help of a carefully-crafted and well-documented architecture, we were able to quickly support avanced features when we - or the community - needed them. Amongst those:

• support for live and VoD DASH / Smooth / HLS* / Downloaded contents / MP4* / WebM* contents and more

• support of advanced encryption configuration, such as multiple keys in a single or separate licences for a given content (with automatic fallbacks when we found an un-decipherable content), persistent licenses, and other device-specific restrictions.

• support for low-latency DASH streams

• support of TTML, WebVTT, SAMI and SRT subtitles

• advanced optimizations for devices with low memory constraints

• advanced APIs for advanced use-cases (audio-only mode, video track selection, manual garbage collection of segments, Peer-To-Peer integration, quality filtering...)

• advanced adaptive streaming algorithms making use of both a network-based approach (for quick start-up) and a buffer-based one (to provide the best quality possible).

* In "directfile" mode, on compatible browsers

Target support

Here is a basic list of supported platforms:

	Chrome	IE [1]	Edge	Firefox	Safari	Opera
Windows	>= 30	>= 11	>= 12	>= 42	>= 8	>= 25
OSX	>= 30	-	-	>= 42	>= 8	>= 25
Linux	>= 37	-	-	>= 42	-	>= 25
Android [2]	>= 30	-	-	>= 42	-	>= 15
iOS	No	-	-	No	No	No

[1] Only on Windows >= 8.

[2] Android version >= 4.2

And more. A good way to know if the browser should be supported by our player is to go on the page https://www.youtube.com/html5 and check for "Media Source Extensions" support.