Advanced: Handling Fullscreen and Playhead Events in Player V3 (Deprecated)

Use event handling and UI elements to control the use of fullscreen mode for the Ooyala
Player V3.

Important: Ooyala Player V3 is deprecated and is scheduled
to be disabled on 2018-01-31. After that date, Player V3 will no longer play your video
or audio content. Customers still using Player V3 need to migrate to Player V4 (see Migrating from Player V3 and Player Migration FAQ).

In this example, you will learn how to use the
onCreate() function to handle events related to the use of fullscreen mode.
In this advanced application, the user clicks a button to switch to fullscreen mode, which is
automatically disabled after 5 seconds via an event handler that monitors the playhead time
(the video duration).

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.

An event listener that monitors the playhead time.

A script tag that creates the Player.

An HTML button for switching to fullscreen mode, with an
associated button click event handler.

Note: You cannot force your webpage to display in fullscreen mode for security reasons. User interaction is
required to initiate the fullscreen mode.

Step 1: Capturing a Button Click

We will create the button used for switching to fullscreen mode, along with its associated
event handler.

Let's create a button with the label Swap to Fullscreen. We will assign an
id attribute called swapbutton so we can associate the
button with an event handler:

<button id="swapbutton">Swap to Fullscreen</button>

We must also define a button click event handler, and refer to the button using its
id attribute of swapbutton. We will take advantage of
the jQuery library
included with the Ooyala V3 Player, referencing the button using the jQuery functionality
included in the OO
namespace:

Now we can add the logic to handle the fullscreen event once the button is clicked. The
Event Model for HTML5 Player V3 (Deprecated) provides you with a
message bus, accessed via the created Player object's mb object. In this
case we will use the message bus publish() function to notify the Player
that it is changing to fullscreen mode:

player.mb.publish(OO.EVENTS.WILL_CHANGE_FULLSCREEN,true);

In this case we pass the OO.EVENTS.WILL_CHANGE_FULLSCREEN event with a
value of true, indicating that the Player is to switch to fullscreen mode.
For a list of all events, see the Player JavaScript API Reference. Here is the web page design we have so far:

In this case we are monitoring the play duration. We would like to disable
fullscreen mode once the playhead reaches 5 seconds, so we will need to subscribe to the
OO.EVENTS.PLAYHEAD_TIME_CHANGED event. This event calls the handler
with several arguments: argument[1] is the duration in seconds, so we will
test whether argument[1] exceeds 5 seconds before publishing the
OO.EVENTS.WILL_CHANGE_FULLSCREEN event with a value of
false (to disable fullscreen
mode):

// Always add event listeners and error handling within the onCreate() function.
// Include this function in the embedded parameters in the Player.create() call.
function onCreate(player) {
// Listen for the playhead time change event,
// and disable fullscreen mode after 5 seconds of play:
player.mb.subscribe(OO.EVENTS.PLAYHEAD_TIME_CHANGED, 'test', function(event) {
// The PLAYHEAD_TIME_CHANGED event calls the handler with several arguments.
// argument[1] has the duration.
if(arguments[1] > 5) {
// Use the message bus API to publish the WILL_CHANGE_FULLSCREEN event.
// The boolean argument (false) accompanies the event,
// indicating the full screen setting is to be disabled.
player.mb.publish(OO.EVENTS.WILL_CHANGE_FULLSCREEN,false);
}
});
}

Complete Example

You now have a complete working example of a web page that lets
the user click a button to switch to fullscreen mode, which is automatically disabled after 5
seconds via an event handler that monitors the playhead time: