Working with Cue Points in the Media Module

A cue point is a marker at a precise time point in the duration of a video. You can use cue points to trigger mid-roll ads (that is, ads that occur during playback of the video content, like a commercial break) or to separate chapters or scenes in a long-form video.

There are two types of cue points, but both simply supply a string value to the type property of the cue point object. The appropriate value is helpful only if used in custom JavaScript while processing the cue point information. 

• Ad - Assigns the string value of AD to the type property
• Code - Assigns the string value of CODE to the type property

Cue points can be added to videos using the Media module or by using the Catalog API. For more information on adding cue points using the Catalog API, see the developer document Implementing Cue Points Programmatically.

Adding cue points

To add cue points to a video, follow these steps:

1. Open the Media module.
2. Click the video title link to open the video properties page.
3. Use the preview player to play the video. Pause the video at the point where you want to add a cue point.
4. Click Add cue point.
5. If needed, adjust the Timecode (hh:mm:ss) values for the cue point. Note that the seconds field supports milliseconds after the decimal point.
6. Select the Type of cue point and then add the appropriate metadata.
   • Ad - An ad request will be made. When using ad cue points, the player should be configured for advertising.
   • Code - Cue points will be handled programmatically. See the Implementing Cue Points Programmatically developer document for more information.

   

7. Enter a Name for the cue point. The name value can be accessed programmatically.
8. Enter Metadata (for code cue points) or Key/Value Pairs (for ad cue points).
   • Metadata - Optional metadata that is stored with the cue point. Metadata can be accessed programmatically. One example of when you might want to use a code cue point and pass metadata is when you want to display different calls to action as the video is playing. See the Brightcove Player Sample: Cue Points Display CTA for an example.
   • Key/Value Pairs - Key/value pairs that can be passed to an ad request. A key-value pair is a set of two linked data items: a key, which is a unique identifier for some item of data, and the value, which is either the data that is identified or a pointer to the location of that data. Key/value pairs can be used to help provide more targeted advertisements. Whatever is entered here will be copied into the ad tag where the {mediainfo.ad_keys} macro is inserted. For more information, see Advertising with the IMA3 Plugin.

After cue points are added to a video, at runtime, the cue points are converted into HTML5 WebVTT cue elements. When this conversion takes place, some of the cue point data, like type and cue point time, are converted into the text track. The cue point time value will be mapped into the WebVTT cue startTime and endTime properties. See this document for more information on the VTTCue interface.

Editing cue points

To edit cue points in a video, follow these steps:

1. Open the Media module.
2. Click the video title link to open the video properties page.
3. Click the cue point to edit in the timeline.

   

4. Edit the cue point properties and then click Save .

Deleting cue points

To delete cue points, follow these steps:

1. Open the Media module.
2. Click the video title link to open the video properties page.
3. Click the cue point to delete in the timeline.

   

4. Click the Delete icon () next to the cue point properties.
5. Confirm the deletion.