How to Get Hold of a Player Event (Single Player on Page)

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 the selected event.

Important! This article was created prior to the onLoad macro that assists you in getting hold of the player object. For further details, please see How to Get Hold of Player Events using the 'onLoad' Macro.

Note: This article explains how to get hold of a single player implemented on a web page.

 

Getting Hold of a Player Event

To get hold of a single player, perform the following steps:

  1. Go to your preferred text editor.

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

  3. Paste your Player Tag into your text editor.
    Your player tag should resemble the following example:




  4. In the player tag, go to the <div> 'id' value and copy it. This is your Player Div Id. Your Player Div Id should resemble the following example:



  5. Add the following JavaScript code to your player tag after the existing <script> tag and before the closing </div> tag.
  6. <script>
    var player;
    var event;
    var grabPlayer = setInterval(getPlayer, 100);

    function getPlayer () {
    player = document.getElementById("PLAYER_DIV_ID");
    player = player.vdb_Player;

    if (player) {
    clearInterval(grabPlayer);
    player.addEventListener(vidible.EVENT_NAME, yourFunction);
    };
    };

    function yourFunction (e) {
    event = e;
    };
    </script>
    Your player tag should resemble the following example:



  7. Replace the 'PLAYER_DIV_ID' placeholder with the Player Div Id you obtained earlier.
  8. 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.
    PLAYER_ERROR 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.
    Your player tag should resemble the following example:



  9. The event listener 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.

    See the following example for reference:




  10. Copy and paste the modified Player Tag and embed it in your web page.
  11. When the page is loaded, the JavaScript will grab the player object and perform your custom function when the event is triggered.

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

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