Events, Modes and Phases

The player communicates its current state through various events and keeps track of assorted modes and phases.

Events can be listened to using the JavaScript API described below, while modes and phases can be queried at any time via API functions.

1.0 | Events

Events indicate every action the player makes, such as play, pause, or switching to full screen. Events can be used as callbacks (triggered by a command) or to retrieve specific information passed along with the event (such as the current playback time). Subscribe to events with on() and unsubscribe with off(). Event names accept an optional namespace (e.g. 'canplay.myapp') which lets you remove a specific listener without affecting others registered on the same event.

Example: Start all API calls from inside the ready event to ensure the player is fully initialised.

player.on('ready', function(){
    player.play();
});

1.1 | Media Events

Example: Play the player when it is ready to play.

player.on('canplay', function(){
    player.play();
});

Example: Log the current playback position on every timeupdate.

player.on('timeupdate', function(){
    console.log('Current time: ' + player.getCurrentTime());
});

1.2 | Data Events

Example: Read clip metadata once it has loaded.

player.on('loadedclipdata', function(){
    var clipData = player.getClipData();
    console.log('Clip title: ' + clipData.title);
});

1.3 | State Changes

1.4 | Ad-related Events

1.5 | Autoplay Next Events

1.6 | Soft Embargo Timer Events

1.7 | General Events

2.0 | Modes

The player runs in different modes dependent on the current media type. For example, the player has a different mode for live content than it has for commercial content.

The current mode can be retrieved by calling getMode(). The event modechange is fired when the mode changes.

Example: When the mode changes to audio, set the volume to 100%.

player.on('modechange', function(){
    if(player.getMode() == 'audio'){
        player.setVolume(1);
    }
});

3.0 | Phases

In the process of playing content, the player goes through different phases. The current phase can be retrieved by calling getPhase(). The event phasechange is fired when the phase changes.

Example: When the player reaches the EXIT phase, retract from fullscreen.

player.on('phasechange', function(){
    if(player.getPhase() == 'EXIT'){
        player.retractFullscreen();
    }
});

4.0 | States

States describe the current condition of the video content. The current state can be retrieved by calling getState(). The statechange event is fired whenever the state changes.

Example: If the player has encountered an error, display an error element.

player.on('statechange', function(){
    if(player.getState() == 'error'){
        myErrorIcon.show();
    }
});

Or display an error element directly on the error event:

player.on('error', function(){
    myErrorIcon.show();
});

5.0 | Other useful classes