Listening to Multiple Message Bus Events

You can use the message bus to listen to multiple events.

The following is a complete example that illustrates how to use the message bus to listen for multiple events.

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.

In this example, you will learn how to use the onCreate() function to handle events related to the playing of a video. In this advanced application, the user plays a video, and the event handlers determine when the video has finished playing. At that point, the event handler destroys the player and displays a message to the user.
The purpose of this web page is to monitor and respond to downloading, playhead time changes, and played events, 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 downloading, playhead time changes, and played events.
    • A script tag that creates the Player.
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);
            });
          }

Step 2: Destroying the Player

Once the video has finished playing, we would like to properly destroy the player and dispose of its resources. To do this we listen for the OO.EVENTS.PLAYED event:
            /* Subscribe to the PLAYED event, 
             * which only occurs when the video has finished playing: */
            player.mb.subscribe(OO.EVENTS.PLAYED , 'example', function(eventName) { 

            });
To destroy the player and dispose of its associated resources, call the Ooyala V3 Player object's destroy() method:
            /* Subscribe to the PLAYED event, 
             * which only occurs when the video has finished playing: */
            player.mb.subscribe(OO.EVENTS.PLAYED , 'example', function(eventName) { 

              /* Destroy the player and properly dispose of its resources: */
              player.destroy();
              
              /* Notify the user: */
              alert('The player has been destroyed!');
            });
Note: In iOS you can only have one HTML5 player running at a time on a web page. You can call the Ooyala V3 Player object's destroy() method to ensure a player does not prevent the playback of another video in a different player on the page.
Here is the completed onCreate() function:
          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);
            });

            /* Subscribe to the PLAYED event, 
             * which only occurs when the video has finished playing: */
            player.mb.subscribe(OO.EVENTS.PLAYED , 'example', function(eventName) { 

              /* Destroy the player and properly dispose of its resources: */
              player.destroy();
              
              /* Notify the user: */
              alert('The player has been destroyed!');
            });
          }

Complete Example

You now have a complete working example of a web page that responds to multiple events when the user plays a video. The event handlers determine when the video has finished playing, at which point the player is destroyed and a confirmation message is displayed to the user:

<!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>
        <b>Destroy Player Example</b><br/><br/>
        <div id='container' style='width:640px;height:480px'></div>

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

            /* Subscribe to the PLAYED event, 
             * which only occurs when the video has finished playing: */
            player.mb.subscribe(OO.EVENTS.PLAYED , 'example', function(eventName) { 

              /* Destroy the player and properly dispose of its resources: */
              player.destroy();
              
              /* Notify the user: */
              alert('The player has been destroyed!');
            });
          }
            
            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",
                                                    },
                                                    onCreate : window.onCreate
                                                  });
                     
                     });
        </script>
        
    </body>
</html>   
   

Was this article helpful?