The Video Cue Point event in Ad Builder enables you to assign actions and animations to run at specific cue points within a video. For example you can synchronize animations based on what is happening in the video, without writing any code.
Video cue points are applicable to the Video component , 360 Viewer (Video) component, and In-Stream ads.
In the following example, you would like to display price tags that match the clothing items in the video.
-
From seconds 0:01 to 3:20, the dress price tag appears when the primary character in the video is modeling the dress.
-
From seconds 3:20 to 5:10, the video focuses on the bracelet, so its price tag (text component) should appear.
-
At 5:60, the video fades out the bracelet and shows the shoe price tag.
Important
Important: Before creating your ad, watch the video and note the following information:
-
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 intervals of a tenth of a second (0.10).
-
Create an ad in Ad Builder.
-
From the Components pane, click the Video component.
The video component is added to the stage.
-
Create and place your elements on the video element, in the exact location that you want them to appear when the video plays. In the example, there are three text elements: Dress 25$, Bracelet 10$, and Shoes 65$.
-
Configure each element, and set its properties in the Properties pane.
-
Clear the Show On Load check box for each element, so the elements do not display immediately when the ad loads.
-
Add a cue point to the video timeline:
-
In the Actions and Animations pane, 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.
-
Assign an event to each cue point according to the order of appearance in the video.
-
For each cue point event, select an action and assign the target element.
For example, select the Fade In animation and assign it to the dressText element. The dressText target appears in the timeline. The next action is to Fade out the dressText and Slide In the braceletText.
-
-
Preview and test that the elements appear correctly while the video runs.
You can use an On Cue Points event to add 3rd party trackers on certain points of your video.
-
Follow steps 1 to 3 in Adding Cue Points to the Video Timeline.
-
Under the On Cue Point event, select Run JavaScript as the action.
-
Click Open Code Editor.
-
Write your own JavaScript code that will fire your tracking URLs on each Cue Point.
This is a sample JavaScript code that you can use for reference.
var ebRand = Math.random(); ebRand = ebRand * 1000000; var pl = document.createElement("img"); pl.type = "text/javascript"; pl.src = "http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=19&mc=imp&pli=999999&PluID=0&ord="+ebRand; document.getElementsByTagName("body")[0].appendChild(pl);
Comments