Listening to a Message Bus Event in Player V3 (Deprecated)

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

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).
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.

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 V3 (Deprecated).

To learn about event handling, see Event Model for HTML5 Player V3 (Deprecated).

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).
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 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 subscribe() function specifying a wildcard ("*") for the event name:
          function onCreate(player) {
          
            /* Subscribe to all events: 
             * this allows you to create logic based on multiple events. */
            player.mb.subscribe("*" , 'example', function(eventName) { 
            
            });
          }
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) {
          
           /*
            * Subscribe to all events:
            * this allows you to create logic 
            * based on multiple events.
            */
            player.mb.subscribe("*" , 'example', function(eventName) { 
            
              /* Write all events, except for downloading and playhead time changed events, 
               * to the JavaScript console: */ 
              if (eventName != OO.EVENTS.DOWNLOADING && 
                  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.
        <script>
            /*
             * Use this to control playing state messages.
             */
            justStartedPlaying = true;
            
            function onCreate(player) {
            
                 player.mb.subscribe("*" , 'example', function(eventName) { 
                     if (eventName != OO.EVENTS.DOWNLOADING && 
                         eventName != OO.EVENTS.PLAYHEAD_TIME_CHANGED)
                          console.log(eventName);
                });
        
                /*
                 * Intercept the video playing event
                 * and display the status in the text box.
                 */
                player.mb.intercept(
                  OO.EVENTS.PLAYING, 
                  'example', 
                  function(eventName) {
                    var message = OO.$("#messagesTxt").val();
                    if (message == "" || justStartedPlaying == true) {
                        OO.$("#messagesTxt").val("Just started playing the video now!!!");
                    } else {
                        OO.$("#messagesTxt").val("Playback continues...");
                    }
                    
                  }
                );
            }
        </script>
                
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.
                 * 
                 * The addDependent() function monitors 
                 * this event ('user_allowed_pause')
                 * and fires the PAUSED event only after this event fires.  
                 */
                player.mb.intercept(
                  OO.EVENTS.PAUSED, 
                  'example', 
                  function(eventName) {
                    if (confirm("Pause Video?") == true) {

                        /*
                         * Once the video has paused we will next be able
                         * to change the playing status from just starting
                         * to continuing.
                         */
                        justStartedPlaying = false;
                    
                        OO.$("#messagesTxt").val("You paused the video!");
                        
                        /*
                         * Fire the dependent event required before
                         * firing the PAUSED event.
                         */
                        player.mb.publish('user_allowed_pause');
                        
                    }else{
                        player.play();
                        OO.$("#messagesTxt").val("Playback continues...");
                    }
                  }
                );
                

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:
                /*
                 * This blocks the PAUSED event from firing until
                 * the 'user_allowed_pause' event has fired 
                 * (see the intercept() function above).
                 */
                player.mb.addDependent(
                  OO.EVENTS.PAUSED, 
                  'user_allowed_pause', 
                  'example', 
                  function(){}
                );
            

Complete Example

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>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My Test Player V3 Web Page</title>
        <!-- Load Ooyala Player -->
        <script src="http://player.ooyala.com/v3/f6d2bba353f74b3db7683cf6b0a91f29?platform=html5-priority"></script>
        <!-- Load additional custom modules -->
    </head>
    <body>
        <div id="ooyalaplayer" style="width:640px;height:360px"></div>
        <script>
            /*
             * Use this to control playing state messages.
             */
            justStartedPlaying = true;
            
            /*
             * 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) {
            
                /*
                 * Subscribe to all events:
                 * this allows you to create logic 
                 * based on multiple events.
                 */
                 player.mb.subscribe("*" , 'example', function(eventName) { 
                     if (eventName != OO.EVENTS.DOWNLOADING && 
                         eventName != OO.EVENTS.PLAYHEAD_TIME_CHANGED)
                          console.log(eventName);
                });
        
                /*
                 * Intercept the video playing event
                 * and display the status in the text box.
                 */
                player.mb.intercept(
                  OO.EVENTS.PLAYING, 
                  'example', 
                  function(eventName) {
                    var message = OO.$("#messagesTxt").val();
                    if (message == "" || justStartedPlaying == true) {
                        OO.$("#messagesTxt").val("Just started playing the video now!!!");
                    } else {
                        OO.$("#messagesTxt").val("Playback continues...");
                    }
                    
                  }
                );
        
                /*
                 * Intercept the video pause event. 
                 * Publish the dependent event required before
                 * actually pausing the video.
                 * 
                 * The addDependent() function monitors 
                 * this event ('user_allowed_pause')
                 * and fires the PAUSED event only after this event fires.  
                 */
                player.mb.intercept(
                  OO.EVENTS.PAUSED, 
                  'example', 
                  function(eventName) {
                    if (confirm("Pause Video?") == true) {

                        /*
                         * Once the video has paused we will next be able
                         * to change the playing status from just starting
                         * to continuing.
                         */
                        justStartedPlaying = false;
                    
                        OO.$("#messagesTxt").val("You paused the video!");
                        
                        /*
                         * Fire the dependent event required before
                         * firing the PAUSED event.
                         */
                        player.mb.publish('user_allowed_pause');
                        
                    }else{
                        player.play();
                        OO.$("#messagesTxt").val("Playback continues...");
                    }
                  }
                );
                
                /*
                 * This blocks the PAUSED event from firing until
                 * the 'user_allowed_pause' event has fired 
                 * (see the intercept() function above).
                 */
                player.mb.addDependent(
                  OO.EVENTS.PAUSED, 
                  'user_allowed_pause', 
                  'example', 
                  function(){}
                );
            }
            

            OO.ready(function() { 
                var videoPlayer = OO.Player.create(
                'ooyalaplayer', 
                'VwZjJ2czoYkk20dfBsb9VuAI1TIbQrg-', {
                    onCreate: window.onCreate
                });
            
            });
        </script>
        
        Messages: <input type="text" id="messagesTxt" size="108" value=" ">
            
    </body>
</html>

Was this article helpful?