Writing to the Message Bus

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

About this Example

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.
Complete the following steps to build your web page:

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

Step 1: Capture 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 that 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 V4 Player, referencing the button using the jQuery functionality included in the OO namespace:
OO.$("#swapbutton").click(function(){
   // logic to handle the fullscreen button 
   }
);

Now we can add the logic to handle the fullscreen event after the button is clicked. 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 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>
  <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>Full Screen Example</b><br/><br/>
    <div id='container' style='width:640px;height:480px'></div>
    <script>

      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
          }); 
      });
      // 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: Monitor 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='container' style='width:640px;height:480px'></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 playback 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):
    <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); }
              }
          });
      }          
Now that we have the onCreate() function, we must include it in the embedded parameters for the OO.Player.create() method call:
            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
          });

Complete Example

Here is 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>
  <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>Full Screen Example</b><br/><br/>
    <div id='container' style='width:640px;height:480px'></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() { 
          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
          }); 
      });
      // 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>

해당 내용이 도움 되었습니까?