Cue Point Basics

The following applications/features are supported via the Brightcove Developer's Group.
If you need help with the following instructions please go to the Brightcove Developer's Group.
In the Developer's Group you can find help from other developers, including some Brightcove folks.

In this article we'll cover the basics of creating and using the cue points feature of the Brightcove service. Cue points are user-defined points in the playback of a title when an ActionScript event is broadcast - you can then trigger custom, synchronized functionality on these events, such as animations, synchronized ad units, or closed captions.


Before You Begin


If you want to follow along with this example, you'll need to have created a Flash movie with an ActionScript snippet placed in it. You should also be familiar with the fundamentals of working with the Brightcove Player in ActionScript. (Read these for background: Embedding in Flash and ActionScript Basics)

This example assumes that you have placed the ActionScript snippet for your player on frame 1 of the main timeline, as described in the Inserting a Player in a Flash Applications document. You may need to alter the code in the examples below to fit into your exact environment, depending on where you've placed the snippet in your file.

 

Create cue points in the console


Cue points are created in the title editing window in the console. Make sure that the title you are adding cuepoints to is programmed to the player that you are using in your application.

Cuepoint interface in the console.

The console features an intuitive interface for creating cue points - I won't go into too much detail here. However the easiest way is to simply play the video and click the "Add cue point" button to add cue points where you want them. Go back when you're done and add unique names for each cue point.


Create cue points via ActionScript


Alternately we can create cue points in ActionScript. This allows us to use cue points that are dynamically generated or imported from another system at runtime.

Cue points can be specified two ways, either as an object with three properties: time, description, and type, or as a number indicating only the time. An array of these plus a titleId is then passed to the player in the addCuePoints function to register a set of cue points.

In the example below, we'll dynamically define a set of three cue points for the featured title when 25%, 50%, and 75%, respectively, of playback has completed:

function init():Void {	
	bcPlayer.addEventListener("contentLoad", this);
}

function contentLoad(evt:Object):Void {	
	var id:Number = bcPlayer.getFeaturedTitleId();
	var duration:Number = bcPlayer.getTitleById(id).length/1000;	
	var cuepoints:Array = [{time:Math.floor(duration/4), description:"One"}, {time:Math.floor(duration/2), description:"two"}, {time:Math.floor(3*(duration/4)), description:"two"}];
	bcPlayer.addEventListener("cuePoint", this);
	bcPlayer.addCuePoints(id, cuepoints);
}

Note that because we're attaching these cuepoints to the featured title, we need to wait for the contentLoad event before we can script against it.


Handle the cue point event


Handling the cuePoint event is similar to other events broadcast by the Brightcove Player. Here's an example:

function cuePoint(evt:Object):Void {	

	var cp:Object = evt.parameters.cuePoint;

	var cpTime:Number = cp.time;
	var cpDescription:String = cp.description
	var cpType:String = cp.type;
	
}

The parameters property of the event object allows access to the original properties of the cuePoint, whether set via ActionScript or via the console.

Now that you know the basics of cuepoints, you can move on to more practical applications, like creating Closed Captions.