Roll Your Own Logo Overlay

Logo overlays can be added to individual videos, or you can add one for all your videos in your account settings, and then override the default one for individual videos. You can also create your own in BEML or using the Player API, however. The advantage of this is that you can then get programmatic control of the logo.

Here I'm going to add an overlay using the Player API, and make it display only for the first three and last three seconds of the video. I'll also change the logo image and its click-through URL for the second appearance. I'm just working with the standard chromeless video player and the Player API, so this is something you can do with any edition of Brightcove Video Cloud. You can see the result in the player below.

 

So here's how I did it. First of all, of course, I enabled the ActionScript/JavaScript APIs in the Player settings, and imported the JavaScript Player API.

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

Next, I stored links to images and their respective click-through URLs in the Long Description field of the video settings - I stored these as a JSON string to make the data easier to work with in JavaScript.

{"imageStart" : "http://files.brightcove.com/BCL-Training-Logo-small.png" , 
"urlStart" : "http://support.brightcove.com/en/training-videos" , 
"imageEnd" : "http://files.brightcove.com/BCLapp-cloud-small.png" , 
"urlEnd" : "http://www.brightcove.com/en/content-app-platform"}

In the TEMPLATE_READY event handler I set up, I get a reference to the player Layout using the getContainer() method of the video player module, and then use the appendChild() method of the Layout container to add the image component.

// 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 a image element over the lower part of the player
BCL.layout.appendChild("");

Next, I get a reference to the new image component, and also use JSON.parse() to turn the long description of the video into an object with the properties: imageStart, urlStart, imageEnd, and urlEnd. I use the first two of these to set the source and the URL values for the image.

// get a reference to the overlay image in the player
BCL.overlayImage = BCL.layout.getChildAt(1);
// get the long description of the video and parse it into an object
BCL.imageData = JSON.parse(BCL.videoPlayer.getCurrentVideo().longDescription);
// set the source of the image
BCL.overlayImage.setSource(BCL.imageData.imageStart);
// set the click-through URL for the image
BCL.overlayImage.setURL(BCL.imageData.urlStart);
// add a listener for progress events

The last part of the TEMPLATE_READY handler adds listeners for the Media STOP and PROGRESS events, and then starts the video.

BCL.videoPlayer.addEventListener(BCMediaEvent.PROGRESS, BCL.onMediaProgress);
// add a listener for stop events
BCL.videoPlayer.addEventListener(BCMediaEvent.STOP, BCL.onMediaStop);
// start the video
BCL.videoPlayer.play();

In the PROGRESS event delivers and object that contains the current position and duration of the video, so it just takes a little conditional logic to make the image visible only during the first three and last seconds, and reset the source and URL during the last three seconds, using the other set of data I retrieved from the video long description. (The script isn't as efficient as it might be here, as I'm executing actions every time the event fires - every 33 milliseconds - but I'm keeping the code simple. You could check for a position within 33 milliseconds of the point you want execution to occur and just make the changes once for the 3 seconds and Duration - 3 seconds positions.)

// add handler for progress events
BCL.onMediaProgress = function(event) {
	/* log("EVENT: Progress"); */
	// if postion is more less than 2 sec or 2 sec from end, set overlay visible; else set it invisible
	if (event.position < 3) {
		BCL.overlayImage.setVisible(true);
	}
	else if ((event.duration - event.position) < 3) {
		// set the new source and click-through URL
		BCL.overlayImage.setSource(BCL.imageData.imageEnd);
		BCL.overlayImage.setURL(BCL.imageData.urlEnd);
		// make it visible
		BCL.overlayImage.setVisible(true);
	}
	else {
		// make image invisible
		BCL.overlayImage.setVisible(false);
	}
}

The STOP event handler just makes the logo visible, in case the viewer pauses the video somewhere in the middle. You can find the full script in the source for this page.