Another Sponsorship Technique

This sample works off the standard Chromeless Video Player, so you can implement this in any Brightcove Video Cloud account. The only change I made to player is to increase the size by setting the height and width param values in the publishing code.

This player displays a semi-transparent image over the lower part of the video at cue points. Watch the video below to see it work.

The semi-transparent images are created simply by using PNG images with the opacity set to 60%. The images are stored on a server, and URLs are stored in the metadata for code cue points in the video, which I set using the cue point editor in the Studio Media Module.

The rest is done using the Player API. I get a reference to the VIDEO_PLAYER module, and then use the getContainer() method to get a reference to the overall Layout container for the player. Then, using the container's appendChild() method, I add an invisible Image element that sits over roughly the bottom fourth of the player.

A cue point listener sets the visibility of the image to true, and then sets the source of the image to the metadata for the cue point.

There is also a listener for the media complete event that sets the image visibility back to false.

// namespace for everything global
var BCL = {};
// initial setup in the special onTemplateLoaded() function
function onTemplateLoaded(id) {
  BCL.player = brightcove.getExperience(id);
  BCL.experienceModule = BCL.player.getModule(APIModules.EXPERIENCE);
  BCL.experienceModule.addEventListener(BCExperienceEvent.TEMPLATE_READY, BCL.onTemplateReady);
}
// event listener for the player being ready
BCL.onTemplateReady = function(event) {
  BCL.experienceModule.removeEventListener(BCExperienceEvent.TEMPLATE_READY, BCL.onTemplateReady);
  // get a reference to the video player module
  BCL.videoPlayer = BCL.player.getModule(APIModules.VIDEO_PLAYER);
  // get a reference to the parent container
  BCL.layout = BCL.videoPlayer.getContainer();
  // append an invisible image element over the lower part of the player
  BCL.layout.appendChild("<Image id=\"overlayImage\" y=\"264\" height=\"74\" visible=\"false\"/>")
  // get a reference to the overlay image in the player
  BCL.overlayImage = BCL.layout.getChildAt(1);
  BCL.videoPlayer.play();
  // add listener for media complete
  BCL.videoPlayer.addEventListener(BCMediaEvent.COMPLETE, BCL.onMediaComplete);
  // get reference to cuepoint module and set up listener 
  BCL.cuePointsModule = BCL.player.getModule(APIModules.CUE_POINTS);
  BCL.cuePointsModule.addEventListener(BCCuePointEvent.CUE, BCL.onCue);
}
 // add handler for cue points
 BCL.onCue = function(event) {
  // make the overlay image visible
  BCL.overlayImage.setVisible(true);
  // set the new source for the bottom image
  BCL.overlayImage.setSource(event.cuePoint.metadata);
}
BCL.onMediaComplete = function(event) {
  // make the overlay image invisible
  BCL.overlayImage.setVisible(false);
}
      

Want to give the overlay a click-through URL as well? That just requires a simple modification. First, in the cue point metadata, save two URLs, one for the image and one for the click-through, separated by commas:

  http://my.sponsor.com/image1.png,http://my.sponsor.com/landingpage.html
      

Then a simple modification of the listener for cue points will do it:

BCL.onCue = function(event) {
  // split the metadata into an array
  var URLarray = event.cuepoint.metadata.split(",");
  // make the overlay image visible
  BCL.overlayImage.setVisible(true);
  // set the new source and URL for the bottom image
  BCL.overlayImage.setSource(URLarray[0]);
  BCL.overlayImage.setURL(URLarray[1]);
  }