Listening for Events using the Smart Player API

The Smart Player API allows you to create custom dynamic solutions in JavaScript that work with both Flash and HTML players. This document includes a basic sample for recording events that take place during playback using the Smart Player API.

Before you begin, acquaint yourself with an introduction to the Smart Player API and see Preparing a Player for the Smart Player API to get started started with your singular solution for Flash and HTML players.

Play the sample

The Smart Player API handles player events, including events triggered by viewer actions like play or pause. You can capture these events using simple event listeners available in the Smart API's VideoPlayerModule class.

In this example, the player listens for the events of pausing, playing and changing videos, and writes the fired event method name and the time during playback in seconds when the event fired.

Get this Sample:

Remember: The Smart Player API is a single JavaScript API for developing solutions that play your videos in a Flash player on desktop machines and devices that support Flash and have it installed, or otherwise play your videos in HTML5 player. If you 're watching the sample above from a desktop computer with Flash installed, it plays in a Flash player.

What you'll need

This document assumes you understand how to work with JavaScript in general. The Smart Player API Reference describes the available methods and events for each player component and provides examples for use. To step through the processes in this document and to create and test your sample solutions, you need the following:

  • The Smart Player API reference
  • A text editor
  • A browser
  • A Video Cloud Studio account
  • Sample videos

How it works

Get a reference to the player and its API modules and set up event listeners

Use the player load event handler, myTemplateLoaded, to get a reference to the player and its API modules. After the player calls the onTemplateReady handler to ready the player modules for the API, set up new event listeners on the video player module for specific playback events that indicate how the user interacts with the player.

var myTemplateLoaded, onTemplateReady, player, modVP, modExp, modCon, previousVideoID=0, currentVideo,
    videosToSwap=new Array(1754261637001,1754261438001); //videos we will swap

myTemplateLoaded = function (experienceID) {
    console.log("loaded");
    player = brightcove.api.getExperience(experienceID);
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
    modCon = player.getModule(brightcove.api.modules.APIModules.CONTENT);
}

onTemplateReady = function (evt) {
    console.log("ready");
    modVP.getCurrentVideo(function (dto) {
       console.log(dto);
    });
    modVP.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.CHANGE, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.ERROR, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.PROGRESS, onMediaProgressFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.STOP, onMediaEventFired);
}

Implement the event handlers to log the events

function onMediaEventFired(evt) {
   document.getElementById("eventLog").innerHTML += "MEDIA EVENT: " + evt.type + " fired at position: " + evt.position + "
"; if (evt.type === "mediaComplete") { changeVideo(); } } function onMediaProgressFired(evt) { document.getElementById("positionLog").innerHTML = "CURRENT POSITION: " + evt.position; }

Create the logic to swap between two videos

Get the current video playing in the player using the getCurrentVideo method and pass a callback function to invoke once the player responds with data.

function changeVideo(){
  modVP.getCurrentVideo(currentVideoCallback);
}

Implement video swapping

Swap videos when the getCurrentVideo method is invoked. Clear the logs and check the video ID returned as playing against one of the two ID's we're swapping, and load the other video into the player.

function currentVideoCallback(currentVideo)
 { document.getElementById("positionLog").innerHTML = "";
   document.getElementById("eventLog").innerHTML = "";

 if (currentVideo.id == videosToSwap[0]) {
     modVP.loadVideoByID(videosToSwap[1]);
 } else {
     modVP.loadVideoByID(videosToSwap[0]);
 }
}

Include the player publishing code with parameters that reference the player and the first video

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<div id="player" style="float: left">
<object id="myExperience1754261637001" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="480" />
  <param name="height" value="270" />
  <param name="playerID" value="2549948545001" />
  <param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisreVadKjzdyJfLcfukyXcGqB" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="includeAPI" value="true" />
  <param name="templateLoadHandler" value="myTemplateLoaded" />
  <param name="templateReadyHandler" value="onTemplateReady">
  <param name="@videoPlayer" value="1754261637001" />
</object>
<div>
<button id="changeVideo" onclick="changeVideo()">Change Video</button>
</div>
</div>

Code Notes:

  • The code above reports details of events fired when a viewer interacts with a player. The solution writes the event method names and the time in seconds during playback when the event fires.
  • Just as you’ve seen in the sample code in Step 5: Access player components of Preparing the Player for the API, after specifying variables to store references to the player as well as the player component modules, this solution references the player and the player component modules in order to access player components. As before, this example gets a reference to the player by passing the player’s experience ID using the function specified as the value of the templateLoadHandler in the player publishing code, myTemplateLoaded in this example. It then references the individual component modules by assigning the variables for those objects to the module constants.
  • In addition to accessing the player component modules using the myTemplateLoaded function, the code also adds an event listener for the Template_Ready event. This event signifies that the first video has loaded into the player template and the player is ready for interaction.

Additional resources

The following references and support articles will help you learn more about the Smart Player API:

 

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments