Handling Cue Points Using the Smart Player API

The new Smart Player API allows you to listen for (or even set) cue points in your video, so that you can respond with mid-stream behaviors. In this example, I will show you how to display overlay images at cue points.

Scan the QR from your iPhone or iPad to load this page on your device

Note: this is a re-do of a previous blog post, showing a way to do it that will work for HTML5 as well as Flash players

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 the 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 buttons below are for development purposes only, to switch between Flash and HTML5 players. Do not use these in production, as the method is unsupported. You should let the Smart Player decide whether to load Flash or HTML5 instead.

 

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.

Using CSS positioning, I place an image tag that is initially hidden over the lower portion of the player. To make the image visible over the Flash player, I add a wmode param to the player publishing code with the value "transparent."

The rest is done using the Smart Player API and JavaScript. I get references to the VIDEO_PLAYER and CUE_POINTs modules, and then and then add listeners for CUE and COMPLETE events.

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

The listener for the media complete event sets the image visibility back to hidden. You can use view source to see the complete code here.

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 in a JSON string

  { "imageURL" : "http://my.sponsor.com/image1.png" , "linkURL" : "http://my.sponsor.com/landingpage.html" }
      

Then you would just need to wrap the image in a link, and change its href value in the cue point handler as well as the image src value. However, be aware that this will not work on iPhones - in fact, even the overlays will not work on iPhones. This is a device limitation. On iPads, the overlays will work correctly; however, click-through URLs will not - this again is a device limitation.