- MDX: Manage > Ads > New > Design New HTML5 Ad > Components > Video > Actions & Animations > Create New Event
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads > Components > Video > Actions & Animations > Create New Event
The Video Cue Point event in Ad Builder enables you to assign actions and animations to execute at specific cue points within a video. This event allows creative users to author animations, which are connected to what is happening in the video, without writing code. Video cue points are applicable to the Video component, 360 Viewer (Video) component and In-Stream ads.
Adding Cue Points to the Video Timeline
In the following example, you would like to overlay panel to display price tags that match the clothing items in the video:
- The dress price tag appears first, while the video plays from 0:01 to 3:20 (when the primary character in the video, for example, is modeling the dress).
- The bracelet price tag (text component) should appear next because the video focuses on the bracelet between seconds 3:20 to 5:10.
- Fade out the bracelet and show the shoe price tag at 5:60.
The procedure follows the example.
- View the video and note the following:
- The time at which the cue points should be displayed.
- The duration of the cue points.
- The elements that should appear.
Cue points are defined on the timeline in tenth of a second (0.10) intervals.
- Create an ad in Ad Builder.
- From the Components panel, click the Video component.
The video component is added to the canvas.
- Create and place your elements on the video element in the exact location on where you want them to appear when the video plays. In the example, there are three text elements, (Dress 25$, Bracelet 10$, and Shoes 65$), as follows.
- Configure each element and set its properties.
Note: Clear the Show On Load check box for each the element.
- Add a cue point to the video timeline:
- In the Actions and Animations panel, click Create New Event and select On Cue Point (x.x sec).
- In the Trigger when video reaches field, type the point in time on the video timeline to add the cue event. You can input a value in 0.1 second increments.
Proceed to assign an action to each cue point according the order to their appearance in the video.
- Click Add Action.
- From the Select Actions list, select an action and assign the target element to the action. For example, select the Fade In Animation and assign it to the dressText element. The dressText target is added to the timeline. The next action is to Fade out the dressText and Slide in the braceletText.
Tip: An action that is displayed for a duration requires a dedicated cue point assigned as the start point of the action, and a cue point assigned as end the action.
- Repeat these steps to add additional cue points on the video timeline.
- Preview and test that the elements are displayed correctly while the video runs.