Listening to a Message Bus Event

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.

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 Player V4.

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

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.
    • A script tag that creates the Player.
    • An HTML input element that displays text indicating whether the video is playing or paused.
Follow these steps to build your web page:

See Complete Example to view the code for the entire web page.

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 Player V4 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);
            });
          }

Complete Example

You now have a complete working example of a web page that loads multiple Ooyala V4 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>
    <head>
        <link rel="stylesheet" href="url_where_hosted/skin-plugin/html5-skin.min.css"/>
        <script language="javascript" src="url_where_hosted/core.min.js"></script>
        <script type="text/javascript" src="url_where_hosted/video-plugin/main_html5.min.js"></script>
        <script type="text/javascript" src="url_where_hosted/skin-plugin/html5-skin.min.js"></script>
    </head>
    <body>
        <div id='container' style='width:640px;height:480px'></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);
                });        
            }
            

            OO.ready(function() { 
              window.pp = OO.Player.create('container', 'YOUR_ASSET_ID', {
                           "playerBrandingId":"YOUR_PLAYER_ID",
                           "pcode": "YOUR_PCODE",
                           skin: {
                                   config: "url_where_hosted/skin-plugin/skin.json",
                                  },
                           // Include the onCreate() function you defined above in these embedded parameters.
                           onCreate : window.onCreate
                         });                     
            });

        </script>
        
        Messages: <input type="text" id="messagesTxt" size="108" value=" ">
            
    </body>
</html>

Was this article helpful?