How to Get Hold of Player Events using the 'onLoad' Macro

The Player exposes a variety of Events in it's life-cycle, from loading until finishing it's playback. These events can be mapped to custom JavaScript functions that will be triggered when the player fires each selected event.

This article explains how to get hold of a specific player using the 'onLoad' Macro.


Note: This article explains how to apply the onLoad Macro to a specific player embedded in one of your sites. In this case the macro will apply only to the specific Player Tag you are currently using.

Note: You may also apply the onLoad macro directly to your Player tag in the Portal. This will ensure that every time you copy a Player Tag from the portal, the onLoad macro will always be included. For further details, please see How to apply the onLoad macro to your player from the portal.

 

Getting Hold of the Player using the 'onLoad' Macro

To get hold of a player using the onLoad Macro, perform the following steps:

  1. Obtain one of your Player Tags from the portal. For further details, please see How to grab a Player Tag.

  2. Go to your preferred text editor, and paste your Player Tag into it.

    Your player tag should resemble the following example:
    <!-- TAG START { player: "Player Events", owner: "Support", for: "Support" } -->
    <div id="56e547dbe4b09eb92cf71b7d" class="vdb_player vdb_56e547dbe4b09eb92cf71b7d56d5921ce4b0f5991ad44713">
    <script type="text/javascript" src="//delivery.vidible.tv/jsonp/pid=56e547dbe4b09eb92cf71b7d/vid=56f17cc8e4b05b1a3f583e69/56d5921ce4b0f5991ad44713.js"></script>
    </div>
    <!-- TAG END { date: 04/10/16 } -->



  3. Check if your player tag has any existing macros by locating the "vdb_params" declaration within your player tag. 

    Note: An exitsitng "vdb_params" decleration means that your player Tag already has at least one specified macro.

    Important! Macro parameters and values are passed in two places within your Player Tag, first on the <div> level, and second to the server by adding it to the <script> tag query string.

    The following table describes how to proceed in each case:

    My Player Tag Has a "vdb_params" decleration

    Add the following text to these two places in your Player Tag:

    1. In the <div> level, within the 'vdb_params' declaration, right after the existing macro, within the existing double quote (") symbols.
    2. In the <script> tag, within the query string, right after the existing macro, within the existing double quote (") symbols. 
      &m.onLoad=getPlayer


    Your Player tag should resemble the following:

    Note: The existing macro parameter and value are highlighted in blue, while the onLoad parameter and value are highlighted in red.

    Important! Macro parameters and values are passed in two places within your Player Tag, first on the <div> level, and second to the server by adding it to the <script> tag query string.

    <!-- TAG START { player: "Player Events", owner: "Support", for: "Support" } -->
    <div id="56e547dbe4b09eb92cf71b7d" class="vdb_player vdb_56e547dbe4b09eb92cf71b7d56d5921ce4b0f5991ad44713" vdb_params="m.parameterX=valueY&m.onLoad=getPlayer">
    <script type="text/javascript" src="//delivery.vidible.tv/jsonp/pid=56e547dbe4b09eb92cf71b7d/vid=56f17cc8e4b05b1a3f583e69/56d5921ce4b0f5991ad44713.js?m.parameterrX=valueY&m.onLoad=getPlayer"></script>
    </div>
    <!-- TAG END { date: 04/10/16 } -->
    My Player Tag Does not have a "vdb_params" decleration
    1. Add the following text at the end of the first <div>, right before the closing angled bracket (>):
      vdb_params="m.onLoad=getPlayer"
    2. Add the following text at the end of the <script> tag, as a query string parameter and value, right before the closing double quote (") and closing bracket (>) symbols:
      ?m.onLoad=getPlayer

    Your Player tag should resemble the following:

    Note: The macro declaration including the onLoad parameter and value are highlighted in red.
    Note: The macros are declared both on the <div> and the <script> levels.
    <!-- TAG START { player: "Player Events", owner: "Support", for: "Support" } -->
    <div id="56e547dbe4b09eb92cf71b7d" class="vdb_player vdb_56e547dbe4b09eb92cf71b7d56d5921ce4b0f5991ad44713" vdb_params="m.onLoad=getPlayer">
    <script type="text/javascript" src="//delivery.vidible.tv/jsonp/pid=56e547dbe4b09eb92cf71b7d/vid=56f17cc8e4b05b1a3f583e69/56d5921ce4b0f5991ad44713.js?m.onLoad=getPlayer"></script>
    </div>
    <!-- TAG END { date: 04/10/16 } -->



     
  4. Add the following JavaScript code into your Player Tag after the existing <script> tag and before the closing </div> tag.
<script>
var player;
var event;

function getPlayer (e) {
player = e;
player.addEventListener(vidible.EVENT_NAME, yourFunction)
};


function yourFunction (e) {
event = e;
console.log(event);
};
</script>


Your player tag should resemble the following example:

Note: The 'getPlayer' function mapping is highlighted in orange, while the custom event listener mapping is highlighted in blue. The event name appearing in red is a placeholder for one of our supported player events that can be mapped using the event listener method.

<!-- TAG START { player: "Player Events", owner: "Support", for: "Support" } -->
<div id="56e547dbe4b09eb92cf71b7d" class="vdb_player vdb_56e547dbe4b09eb92cf71b7d56d5921ce4b0f5991ad44713" vdb_params="m.onLoad=getPlayer">
<script type="text/javascript" src="//delivery.vidible.tv/jsonp/pid=56e547dbe4b09eb92cf71b7d/vid=56f17cc8e4b05b1a3f583e69/56d5921ce4b0f5991ad44713.js"></script>

<script>
var player;
var event;

function getPlayer (e) {
player = e;
player.addEventListener(vidible.EVENT_NAME, yourFunction)
};


function yourFunction (e) {
event = e;
console.log(event);
};
</script>
</div>
<!-- TAG END { date: 04/10/16 } -->


  1. Replace the 'EVENT_NAME' placeholder with the required player event that you wish to map, according to the following table:

    Event Name Description
    PLAYER_READY An event fired when the player has fully loaded on the page.
    VIDEO_DATA_LOADED An event fired when the player has loaded all the relevant content video data.
    CONTEXT_STARTED An event fired when the player has started the first playback either of an Advertisement or a Content video. 
    VIDEO_START An event fired when the player has started to playback a content video.
    VIDEO_PAUSE An event fired when the content video playback has been paused.
    VIDEO_PLAY An event fired when the player has started or restarted to playback the Content video.
    VIDEO_SELECTED An event fired when a content video has been selected for playback from the related videos pane.
    VIDEO_SEEKEND An event fired when the player playback cursor has been moved to a different time-stamp.
    VIDEO_VOLUME_CHANGED An event fired when the player volume has been changed from it's last state.
    VIDEO_TIMEUPDATE An event fired every second when playing back a content video.
    VIDEO_END An event fired when the content video has finished it's playback.
    PLAYLIST_END An event fired when the player has completed playback of all the videos in a playlist.
    VIDEO_META An event fired before the Advertisement starts playback.
    AD_START An event fired when the player has started to playback an Advertisement.
    AD_END An event fired when the player has finished to playback an Advertisement.
    AD_META An event fired before the Advertisement starts playback.
    CONTEXT_ENDED An event fired when the player has finished it's last playback either an Advertisement or Content video.
      An event fired when no content videos are attached to the player or when a content restriction (Company/Geo/Domain) is preventing the video from playing back.

    Note: In the following example we have selected the 'VIDEO_TIMEUPDATE' event highlighted in red.

    Your player tag should resemble the following example:
    <!-- TAG START { player: "Player Events", owner: "Support", for: "Support" } -->
    <div id="56e547dbe4b09eb92cf71b7d" class="vdb_player vdb_56e547dbe4b09eb92cf71b7d56d5921ce4b0f5991ad44713" vdb_params="m.onLoad=getPlayer">
    <script type="text/javascript" src="//delivery.vidible.tv/jsonp/pid=56e547dbe4b09eb92cf71b7d/vid=56f17cc8e4b05b1a3f583e69/56d5921ce4b0f5991ad44713.js?m.onLoad=getPlayer"></script>

    <script>
    var player;
    var event;

    function getPlayer (e) {
    player = e;
    player.addEventListener(vidible.VIDEO_TIMEUPDATE, yourFunction)
    };


    function yourFunction (e) {
    event = e;
    console.log(event);
    };
    </script>
    </div>
    <!-- TAG END { date: 04/10/16 } -->



  2. The event listener method within the 'getPlayer' function maps between the selected player event and a custom JavaScript function. In this example we have named this function 'yourFunction'.

    You can create your own custom function and give it any name you like, as long as you make sure you use the correct function name in the event listener when doing so.

  3. Copy and paste the modified Player Tag and embed it in your web page.

    When the player on the page is loaded, the 'onLoad' Macro will call the 'getPlayer' function and pass it the player object. The player object is then used to bind between a supported player event to custom function called 'yourFunction' using an event listener method. 

    In this example, go to your browser development tools and select the JavaScript Console to view the console logs triggered by the selected event.

  4. Optional: You can map a player event to perform a Player actions such as: Pause, Play, Mute etc. For further details please see What are Player Actions?

 

 

Have more questions? Submit a request