🏠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.

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:

  • deploying the demo or doc to github pages
  • updating the player version…

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/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, which are features who might completely change their API in each player version.

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

src/transports/: The transport protocols

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

What is exported there are functions to load and parse:

  • manifests
  • 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 parsing files

Functions to parse given formats (isobmff, ttml, sami, DASH and HSS manifests etc.).

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/pipelines/: The networking pipelines

Handle the segment 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 manifest and new segments for the rest of the core.

src/core/source_buffers/: SourceBuffers definitions

Provide multiple abstraction to manage SourceBuffers, which are the objects through which media segments are added to the browser.

In this directory, you have code for both SourceBuffer managed natively (i.e. Audio and Video SourceBuffers) and SourceBuffer implementations for other types of content (text, images etc.).

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.