rx-player

📖 API documentation - ⏯ Demo - 🎓 Getting Started - 🔧 Contributing

The RxPlayer is a library implementing a DASH and Microsoft Smooth Streaming media player on a browser, by relying on the HTML5 Media Source Extensions and Encrypted Media extensions browser APIs.

This library only implements the core, non-UI part of a media player - you provide the interface while it handles the streaming. See our demo page for an example implementation.

Initially built for Canal+'s complex requirements across diverse devices, it prioritizes configurability and integration flexibility.

---

The RxPlayer can be seen as the “engine” providing adaptive streaming capabilities to an application:

• Beyond DASH and Smooth Streaming support (and HLS on devices with native support like Safari), it handles complex scenarios like multiple DRM keys, fallback mechanisms for undecipherable or undecodable qualities, most subtitle formats and advanced heuristics to keep the playback going.

• Multi-threaded architecture: core logic can be offloaded to a separate thread, keeping the player from blocking your application and vice-versa.

• Production-tested across a wide device range: from low-end set-top boxes to high-end computers, with optimizations for constrained environments.

• Highly configurable with a well-documented API: player behavior can be controlled at a granular level.

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 or yarn:

# when using npm:
npm install --save rx-player

# or, when using yarn instead:
yarn add rx-player

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

import RxPlayer from "rx-player";

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

To be able to play with the player without needing to perform any setup we also created multiple live-editable demos:

• Playing a clear DASH content
• Playing an encrypted DASH content
• Playing an RxPlayer-specific MetaPlaylist 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 :

For example, to play encrypted DASH contents, you could just write:

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

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

API

We documented the API in every little detail 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.

Contribute

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

npm install

You can then run the list script to see the different scripts provided to test your modifications, run a demo locally etc.:

npm run list

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

Features

Key features:

• live and VoD DASH (including low-latency) / Smooth / HLS* / Downloaded contents / MP4* / WebM* contents and more.

• advanced encryption configuration: multiple keys in a single or separate licenses for a given content, automatic fallbacks on undecipherable contents, persistent licenses, complex MediaKeySystemConfiguration.

• TTML, WebVTT, SAMI and SRT subtitles.

• multi-threading support.

• extensive APIs: audio-only, video track selection, manual garbage collection of segments, Peer-To-Peer integration, quality filtering…

• adaptive streaming algorithms: both a network-based for quick start-up and buffer-based to provide the best quality possible.

• complex segment scheduling logic: prioritizing closer media segments while making sure that the bandwidth usage is always optimal and the rebuffering risks always low.

• heuristics to ensure playback stays smooth, the RxPlayer monitors playback and take actions if the current device has issues while decoding the stream.

• optional WebAssembly-based MPD parser for DASH contents (for very large Manifests).

* In “directfile” mode, on compatible browsers