Another Sponsorship Technique

This is a follow-up to my previous blog post on sponsorship and promotions. Here I'll show an additional technique to display sponsor messages in overlays, rather than replacing the whole video player.

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]);
  }