Events, Modes and Phases

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

Events can be caught in any Javascript event described below while modes and phases can be requested via functions in the API.

1.0 | Events

Events indicate every action the player makes, such as play, pause or switch to full screen. Events can be used in combination with commands as callback functionality or with data attributes to obtain certain information (like the time played). These events can be caught with the on() function in the player API.

1.1 | Media Events

1.2 | Data Events

1.3 | State Changes

1.4 | Ad-related Events

1.5 | Autoplay Next Events

1.6 | General Events

Example: Play the player when the canplay event is fired.

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

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 is has for commercial content.

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

Example: If the mode is audio, set the volume to 100%.

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 thrown when the phase is changed.

Example: If the phase is EXIT, retract from fullscreen.

if(player.getPhase() == 'EXIT'){
        player. retractFullscreen();
}

4.0 | States

States describe the current condition of the video content.  These states be retrieved by calling the getState() function. The statechange event is thrown when the state changes, along with the related state event described below.

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

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

Or display an error element directly on the error event:

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

5.0 | Other useful classes