Listening to a Message Bus Event

function onCreate(player) {

player.mb.subscribe('*','myPage', function(eventName) {});

}

OO.Player.create('playerwrapper',embedCode, { onCreate: window.onCreate

});

Message Bus API

Communicate with the message bus using publish, subscribe, and other functions.

The Ooyala Player exposes several functions for communication with the message bus. See the Player JavaScript API Reference for more information.

You can use the message bus to listen to a single event or multiple events.

The following example illustrates how to use the message bus to listen for an event and to use addDependent to block a pause event and display a confirmation message.

PLAYER DEVELOPER GUIDE | PLAYER JAVASCRIPT API PROGRAMMING | 39 You can use the addDependent() function to block events on other events. In the following example, we use the addDependent function to block a pause function so that when a pause button is pressed, we can display a message box and ask for confirmation. For more information about using the addDependent() function, see the Player JavaScript API Reference.

To develop the head element and the logic for presenting and creating the Player, see Basic Tutorial for the HTML5 Player on page 11.

To learn about event handling, see Event Model for HTML5 Player on page 37.

Suppose you would like to customize how your web page responds to user interaction with the video player. In this example we intercept the pause and play events. When the user clicks the pause control, a confirmation dialog appears before the video is paused. When the user clicks the play or pause control, a textbox displays the new state of the player.

The purpose of this web page is to provide the user with an option to switch to fullscreen mode, so the design will include:

• A head element containing a script tag specifying the loading and initialization request.

• A body element containing:

• UI presentation and layout for the Player container.

• Event listeners that monitor and respond to player events.

• Functions that intercept play and pause events and fire dependent events.

• A script tag that creates the Player.

• An HTML input element that displays text indicating whether the video is playing or paused.

STEP 1: LISTENING TO MULTIPLE EVENTS

Sometimes it is useful to listen and respond to multiple events at once. One way to do this is to subscribe to all events. The Event Model for HTML5 Player on page 37 provides you with a message bus, accessed via the created Player object's mb object. In this case we will use the message bus subscribe() function specifying a wildcard ("*") for the event name:

function onCreate(player) {

Now that we are listening for every possible event, we can include logic based on multiple events within the callback function via its eventName parameter. In this example we write all events, except for downloading and playhead time changed events (OO.EVENTS.DOWNLOADING and OO.EVENTS.PLAYHEAD_TIME_CHANGED ), to the JavaScript console log:

function onCreate(player) {

eventName != OO.EVENTS.PLAYHEAD_TIME_CHANGED) console.log(eventName);

});

}

STEP 2: INTERCEPTING EVENTS

To intercept a video playing event (OO.EVENTS.PLAYING), call the message bus intercept() function.

In this example we include a callback that displays a message in the textbox. If the textbox was previously empty, the message indicates that the video has begun playing whether the video has begun playing or playback has continued. We add a variable called justStartedPlaying to keep track of the player state.

Similarly, to intercept a video pause event (OO.EVENTS.PAUSED), we again call the message bus

intercept() function. If the user confirms that the video is to be paused, the callback fires a dependent event called user_allowed_pause, used later in the addDependent() method that blocks the

OO.EVENTS.PAUSED event until this dependent event is fired. In this case the callback function displays a confirmation dialog, updates the player state, and updates the message displayed to the user:

* Intercept the video pause event.

* Publish the dependent event required before * actually pausing the video.

PLAYER DEVELOPER GUIDE | PLAYER JAVASCRIPT API PROGRAMMING | 41

STEP 3: SETTING UP EVENT DEPENDENCIES

In order to block the video pause event until the dependent event fires, we call the message bus

addDependent() function. In this example we require that the user_allowed_pause event fire before the OO.EVENTS.PAUSED event is permitted to fire:

You now have a complete working example of a web page that loads multiple Ooyala V3 Players, responds to user interaction with the video player by intercepting pause and play events with a confirmation dialog and textbox that displays messages, and creates the player:

<!DOCTYPE html>

<head>

<title>My Test Player V3 Web Page</title>

f6d2bba353f74b3db7683cf6b0a91f29?platform=html5-priority"></script>

</head>

<body>

PLAYER DEVELOPER GUIDE | PLAYER JAVASCRIPT API PROGRAMMING | 43

Messages: <input type="text" id="messagesTxt" size="108" value=" ">

</body>

</html>

In document PLAYER DEVELOPER GUIDE (Page 38-43)