🏠Home🗎Page List↑Top

File architecture

🏠Home🗎Page List↑Top

File architecture

This page describes how the player files are organized. Each chapter go through a single directory or subdirectory, in alphabetical order.

The demo/ directory: Demos of rx-player implementations

Demonstration of functional codebases implementing the rx-player.

At the time of writing, there are two demos:

  • full: Demo with a graphic interface, written with the React library, to showcase what the player can do

  • standalone: Just expose the rx-player in window, to allow scripted interactions with it in the console. The player is linked to a video tag in the displayed page.

The dist/ directory: Player builds

Store the player builds of the last version released.

Contains two files: the minified (rx-player.min.js) and the non-minified files (rx-player.js). Both are automatically generated with scripts at every new release.

Two directories, namely _esm5.raw and _esm5.processed can also be generated in here if the right scripts are called. These allow to publish more modular codebases to npm.

The doc/ directory: Player documentation

Documentation, mostly in markdown, of various subjects related to the rx-player:

  • API documentation

  • code architecture documentation

  • documentation to help developpers (to use APIs, switch versions, know which APIs are deprecated)

The scripts/ directory: scripts

Contains various scripts used to help the test and the management of the player code.

For example:

  • generating one of the demo and starting the server to run it
  • deploying the demo or doc to github pages
  • updating the player version
  • generating the rx-player build before publishing on npm

The src/ directory: the source code

The src contains the entire source code of the rx-player.

It is subdivized into subdirectories which are defined here.

src/compat/: The compatibility files

src/compat contains functions allowing to use browser APIs in a cross-browser manner.

For example, if an event does not have the same name depending on the browser, the compat files will expose a simple function allowing to make sure the event is catched, taking the task of registering the right event on the callback given.

Every functions needed in the rest of the code are exported in compat/index.js, making it easier to import (e.g. by just doing import { whatINeed } from "../compat";)

src/core/: The core files

Defines the logic and behavior of the player, regardless of the browser and of the streaming technology used.

That’s where:

  • the api is defined
  • the buffer is managed
  • the MSE and EME APIs are called and managed
  • the segments are downloaded
  • adaptive bitrate strategies are set

This directory contains other subdirectories which are listed in the next chapter.

src/custom_source_buffers/: Custom SourceBuffers definitions

SourceBuffers are the JavaScript objects through which media segments are added to the browser.

Definition are usually already provided by the browser for the Audio and Video SourceBuffers. This directory allows to implement in JavaScript SourceBuffers for other type of media (e.g. text, overlays, images…).

For example, when a new text chunk is pushed to the text SourceBuffer, the custom text SourceBuffer will:

  • update its buffered information
  • call the corresponding text parser
  • display the right subtitle at the right timecode

src/errors/: Error definitions

Contains the definition of the error classes used in the rx-player and accessible through the API.

src/experimental/: Experimental features

You will find here experimental features. Those are tested features who might completely change their API in new player versions.

src/features/: Feature switching

This manage activated or deactivated features (e.g. DASH, TTML subtitles parsing).

It exports an object defining the different activated features and provide utils to initialize and update them.

src/manifest/: The Manifest class

Defines a common Manifest class, regardless of the streaming technology (DASH, HSS…). This class is then used by the rest of the RxPlayer, to allow interaction with it without considering the underlying technology used.

src/transports/: The transport protocols

Defines a common interface for multiple streaming technologies (DASH, HSS).

What is exported there are functions to load:

  • Manifests/MPDs
  • video/audio segments
  • subtitles tracks
  • image tracks

For different streaming technologies.

As in most of the code of the rx-player, everything used in the other parts of the code is exported in the index.js file at the root of this directory.

src/parsers/: The parsers

Functions to parse various formats into the same interface.

The parsed data being either:

  • Manifest documents: DASH’s MPD, HSS’s Manifest…
  • containers: ISOBMFF (CMAF, fMP4, MP4), Matroska (MKV, WEBM)
  • text tracks: TTML, SAMI, SRT, WebVTT
  • image containers: BIF

src/typings/: Typescript typings

This directory contains only declaration files for TypeScript. It is automatically added as a typeRoots when the TypeScript code is transpiled.

src/utils/: The utils

This directory contains general helpers which are used in different parts of the rx-player code.

The src/core/ directory

As written in the previous chapter, this is the “core” of the player, where the logic is defined.

As this directory is versatile and complicated, it also deserves its own chapter.

src/core/abr/: The adaptive bitrate code

Defines an ABRManager class which manages the adaptive streaming part of the player.

This manager takes various observables/options as inputs to record the current situation of the player, give an opinion about the best media tracks to choose, and provide methods allowing to get/set various ABR-related options.

Despite containing several files and using several classes, only the ABRManager defined in abr/index.js should be needed by the rest of the core. This allows to isolate this complex part and facilitate future refactoring and improvements.

src/core/api/: The API definition

Defines the rx-player API. This is the part the library user will directly interact with.

src/core/buffers/: The Buffer management

The code there calculate which segments should be downloaded, ask for their download and push the segments into the SourceBuffers.

src/core/eme/: Encryption management

Defines functions allowing to handle encrypted contents through the EME APIs.

src/core/fetchers/: The fetchers

Handle the segments and Manifest downloading pipelines (load and parse) as defined in the src/transports/ directory.

This is the layer directly interacting with the transport part (HSS, DASH). It facilitates the role of loading the Manifest and new segments for the rest of the core.

src/core/source_buffers/: SourceBuffers definitions

Code allowing to interact with the SourceBuffers, the JavaScript object through which media segments are pushed to be able to play a content.

For Audio and Video, SourceBuffers are already provided by the browser, for other type of contents (like subtitles), we rely on Custom SourceBuffers defined in src/custom_source_buffers.

src/core/init/: Content initialization

This is the central part which download manifests, initialize MSE and EME APIs, instanciate the Buffer and link together many subparts of the player.

The tests/ directory: Test strategies, integration and memory tests

The rx-player contains integration tests (test the whole player), unit tests (test specific parts of the code) and memory tests (tests the memory usage of the player).

Integration tests are entirely written in the tests/integration subdirectory.

Memory tests are entirely written in the tests/memory subdirectory.

As for unit tests, they are written alongside the code, in __tests__ directories, the tests/unit directory only contains the configuration files to launch them.