Writing to the Message Bus in Player V3

Use the publish() function to write to the message bus, setting parameters as needed.

To write to the message bus, use the publish() function.

For example, you can set the player to fullscreen mode by publishing the WILL_CHANGE_FULLSCREEN event with an event parameter of true:
this.mb.publish(OO.EVENTS.WILL_CHANGE_FULLSCREEN, true);
To exit from fullscreen, set the WILL_CHANGE_FULLSCREEN event parameter to false:
this.mb.publish(OO.EVENTS.WILL_CHANGE_FULLSCREEN, false);

The following is a complete example in which the publish() function is used to control fullscreen mode for the player. To develop the head element and the logic for presenting and creating the Player, see Basic Tutorial for the HTML5 Player V3.

To learn about event handling, see Event Model for HTML5 Player V3. For a list of all events, see the Player JavaScript API Reference.

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:
OO.$("#swapbutton").click(function() {
            
  // logic to handle fullscreen event
});

Now we can add the logic to handle the fullscreen event once the button is clicked. The Event Model for HTML5 Player V3 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:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My Test Player V3 Web Page</title>
        
        <!-- Load the Ooyala V3 Player -->
        <script src="http://player.ooyala.com/v3/f6d2bba353f74b3db7683cf6b0a91f29?platform=html5-priority"></script>
        
    </head>
    
    <body>
        <b>Full Screen Example</b><br/><br/>

        <div id="ooyalaplayer" style="width:640px;height:360px"></div>

        <script>
            
          OO.ready(function() { 
            player = OO.Player.create(
              'ooyalaplayer', 
              'hkbTd2czrIYRs4-HnJ9nVcHSxtA07FUK', {
              
                // embedded parameters will go here
              }
            );
        
            // This function defines a button that enables fullscreen mode when clicked.
            // The id, swapbutton, matches the id attribute of the <button> control defined below.
            OO.$("#swapbutton").click(function() {
            
              // Use the message bus API to publish the WILL_CHANGE_FULLSCREEN event.
              // This time the boolean argument (true) indicates 
              // that the full screen setting is to be enabled. 
              player.mb.publish(OO.EVENTS.WILL_CHANGE_FULLSCREEN,true);
            });
          });
        </script>
        
        <br />        
        <!-- Place a button below the player container. 
             Its id attribute, swapbutton, is referenced above in the click event. -->
        <button id="swapbutton">Swap to Fullscreen</button>
        
    </body>
</html>
      

Step 2: Monitoring the Play Duration

You can manage all events, errors, and customization related to the Player object within the onCreate() function, which is included in the body as shown here:
    <body>
        <b>Full Screen Example</b><br/><br/>

        <div id="ooyalaplayer" style="width:640px;height:360px"></div>

        <script>
          // 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) {
          }
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);    
               }
            });
          }
          

For more information about play events, see (Deprecated) Displays, Plays, and Play Starts.

Now that we have the the onCreate() function, we must include it in the embedded parameters for the OO.Player.create() method call:
            player = OO.Player.create(
              'ooyalaplayer', 
              'hkbTd2czrIYRs4-HnJ9nVcHSxtA07FUK', {
              
                // Include the onCreate() function you defined above in these embedded parameters.
                onCreate : window.onCreate
              }
            );

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:
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My Test Player V3 Web Page</title>
        
        <!-- Load the Ooyala V3 Player -->
        <script src="http://player.ooyala.com/v3/f6d2bba353f74b3db7683cf6b0a91f29?platform=html5-priority"></script>
        
    </head>
    
    <body>
        <b>Full Screen Example</b><br/><br/>

        <div id="ooyalaplayer" style="width:640px;height:360px"></div>

        <script>
          // 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);    
               }
            });
          }
            
          OO.ready(function() { 
            player = OO.Player.create(
              'ooyalaplayer', 
              'hkbTd2czrIYRs4-HnJ9nVcHSxtA07FUK', {
              
                // Include the onCreate() function you defined above in these embedded parameters.
                onCreate : window.onCreate
              }
            );
        
            // This function defines a button that enables fullscreen mode when clicked.
            // The id, swapbutton, matches the id attribute of the <button> control defined below.
            OO.$("#swapbutton").click(function() {
            
              // Use the message bus API to publish the WILL_CHANGE_FULLSCREEN event.
              // This time the boolean argument (true) indicates 
              // that the full screen setting is to be enabled. 
              player.mb.publish(OO.EVENTS.WILL_CHANGE_FULLSCREEN,true);
            });
          });
        </script>
        
        <br />        
        <!-- Place a button below the player container. 
             Its id attribute, swapbutton, is referenced above in the click event. -->
        <button id="swapbutton">Swap to Fullscreen</button>
        
    </body>
</html>
  

Was this article helpful?