HTML5 Player Architecture

This doc describes the internal architecture of the JW Player for HTML5.

Classes

The player contains the following functional blocks:

• core: the main player component. Initializes the player and contains hooks for all API calls.

• parser: parses an HTML5 video tag to insert its attributes.
• skinner: parses a PNG skin and makes its options and elements avalaible to display components.

• model: determines and instantiates the correct media provider. Manages the resizing (non-media) part of the player.
• view: renders and resizes the main video tag / embed tag.
• controller: processes API input and forwards it to the correct mediaprovider or model.

• mediaFlash: manages a chromeless Flash player; translating all events to internal JW HTML5 events.
• mediaVideo: manages an HTML5 video tag; translating all events to internal JW HTML5 events.

• componentControlbar: renders the controlbar, keeps it up to date and processes user input.
• componentsDisplay: renders the display, keeps it up to date and processes user input.

• utils: contains a set of utility classes, totally independent from certain player instances.

Initialization

When the player is initialized, the following actions are taken:

1. A player instance is set up and made available to javascript.
2. Options are loaded from the invocation and the video tag, overwriting the defaults.
3. The video tag source is removed, to prevent preloading.
4. The model checks whether it can do HTML5, Flash or nothing.
5. The model injects the correct player element (flash or video for now).
6. The skin and its assets are loaded (only for HTML5).
7. The player fires a ready event.

Instance

Player instances can be reference by invoking $.jwplayer(). Every player instance contains the following data:

• The id of the player.
• The API calls (play, pause, seek, resize etc.)
• The list of configuration options.
• A skin object with (nested by component name) settings and images.
• (anything else)?