The Video component

The Video component lets you embed a video in your project and add interactive features.

To display a YouTube video, use the YouTube component instead.

This component is not supported for Google Ads, Google AdMob, or AMPHTML ads.

To add the Video component to your project:

  1. Open the Components panel, then the Media folder.
  2. Drag the Video component to the stage. If you're building an ad, you can also use the File > Import assets... command and skip the next step.
  3. In the Video properties section of the Properties panel, enter the video source file URL in the Sources field. If the video source file is local, click the Browse button in the field to select the video from your computer file system.
  4. To make your video interactive, you can add hotspots or cue points. Double-click the Video component on the stage to open the Interactive Video dialog.
    • Hotspots appear over the Video component during specified times.
    • Cue points let you tie events to specific times during video playback.

Video on mobile browsers

Mobile browsers may disable video autoplay to keep users from incurring data charges for unrequested content. The best practice for mobile browsers is to turn off autoplay and to turn on video controls instead.

In the Properties panel, make these changes:

  • Uncheck the Autoplay box.
  • Check the Show controls box.

Interactive Video dialog

The Interactive Video dialog lets you preview the video, as well as set hotspots and cue points. The dialog includes a video timeline, so you can see when hotspots and cue points occur. Hotspots are only visible in the video preview when the playhead is between the hotspot's starting and ending times.

Interactive Video dialog controls

Below the video preview, you can use the following buttons to control video playback and the playhead position:

Jump backward (to a cue point, the start or end of a hotspot, or the start of the video)
Previous frame
/ Play/Pause
Next frame
Jump forward (to a cue point, the start or end of a hotspot, or the end of the video)


You can also edit the current video play time directly by clicking the time in yellow and entering a new time in seconds.

Add a cue point

  1. If the video timeline playhead is where you want to add the cue point, click the Create cue point button below the video. Otherwise, right-click the video timeline and select Add cue point from the pop-up menu.
  2. A cue point marker appears above the video timeline.
  3. You can edit the cue point ID in the Properties panel on the right, or by right-clicking the cue point and selecting Edit id....
  4. To adjust the cue point time, drag the cue point marker along the video timeline or enter a new time in the Properties panel. Cue points must be at least half a second apart from each other.

You can now reference the cue point in events and actions after you close the dialog.

Delete a cue point

Right-click the cue point marker and select Delete.

Add a hotspot

  1. Move the timeline playhead to where you want to add a hotspot.
  2. Click the + Hotspot button to the left of the video timeline. A new hotspot track appears under the video timeline.
  3. In the Properties panel on the right, select the asset you want to display as the overlay.
    • Skip this step if you want the hotspot to be transparent.
    • If you use a video asset, the video will start playing automatically without controls when the hotspot is shown.
  4. Adjust the hotspot's position, size, and timing.
    • By default, the hotspot is the same size as the video frame, and shows during the entire duration of the video, including before the video playback starts and after playback ends.
    • You can make changes in the Properties panel or drag the hotspot itself, the hotspot resize handles, and the hotspot bar in the video timeline.

To react to the user clicking the hotspot, set up an event that detects Mouse > click after you close the dialog.

Hotspots don't work in fullscreen videos.

Delete a hotspot

Click the X next to the hotspot ID left of the video timeline.

Properties

Video component properties

The Video component properties are visible in the Properties panel. (You must exit the Interactive Video dialog.)

Property Description
Name The component name.
Autoplay When selected, your video plays automatically when the page loads. Not supported on all mobile browsers.
Loop When selected, the video playback repeats continuously.
Mute When selected, the video playback starts muted.
Show controls When selected, the video player displays a standard video control bar.
Sources The video source URL. You can include multiple sources for different formats by separating the URLs with commas. Can be bound to dynamic data.
Poster The URL of a poster frame to display until the user plays or seeks the video. Can be bound to dynamic data.
Cue point properties

You can see and edit cue point properties when you're in the Interactive Video dialog.

Property Description
ID The cue point ID.
If you change the ID of a cue point that is referenced in any events, you must update the event.
Time The time in seconds when the cue point is set. Can be bound to dynamic data.
Hotspot properties

You can see and edit hotspot properties when you're in the Interactive Video dialog.

Property Description
ID The hotspot ID.
If you change the ID of a hotspot that is referenced in any events, you must update the event.
Left The left position of the hotspot as a percentage of the Video component width. Can be bound to dynamic data.
Top The top position of the hotspot as a percentage of the Video component height. Can be bound to dynamic data.
Width The width of the hotspot as a percentage of the Video component width. Can be bound to dynamic data.
Height The height of the hotspot as a percentage of the Video component height. Can be bound to dynamic data.
Show time The time in seconds when the hotspot becomes visible. Not applicable if Show before playback is selected. Can be bound to dynamic data.
Show before playback Whether the hotspot is displayed before video playback begins.
Hide time The time in seconds when the hotspot stops being visible. Not applicable if Show after playback is selected. Can be bound to dynamic data.
Show after playback Whether the hotspot continues to display after video playback ends.
Asset The image, video, or group to display as the overlay. Can be bound to dynamic data.
Scaling If the asset is an image, the scaling method to use if the hotspot and asset dimensions differ:
  • Resize image to fit - The image is scaled as large as possible within the element without cropping or stretching.
  • Crop image to fill - The image is scaled as large as possible to fill the hotspot's space without stretching the image. Images with different proportions than the hotspot are cropped either vertically or horizontally.

Events and actions

Learn how to configure events.

Events

Events sent by the Video component

You can trigger other actions based on the following Video component events:

Event Description
Play after pause Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.
Paused Sent when playback is paused.
Playing Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).
Ended Sent when playback completes.
Volume change Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
Seeked Sent when a seek operation completes.
Buffering Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

To select one of these events in the Event dialog, set the Video component as the target.

Events sent by cue points

If you add a cue point to a video, you can trigger other actions based on the following cue point event:

Event Description
Cue point reached Sent when playback of the media has reached a time defined in a cue point.

To select this event in the Event dialog, set the cue point as the target.

Events sent by hotspots

If you add a hotspot to a video, you can trigger other actions based on the following hotspot events:

Event Description
Hotspot shown Sent when the hotspot becomes visible.
Hotspot hidden Sent when the hotspot is hidden.

To select one of these events in the Event dialog, set the hotspot as the target.

Actions

Actions performed by the Video component

The following Video component actions can be triggered in response to other events:

Action Configuration options
Toggle mute none
Pause none
Play none
Replay none
Seek Time - The time in seconds to skip to.
Set Volume Set Volume (0-100) - The volume of the video as a percentage.
Set Sources Sources - The source URLs for different formats, separated by commas.

When you select one of these actions in the Event dialog, set the Video component as the receiver.

Actions performed by cue points

If you add a cue point to a video, the following cue point actions can be triggered in response to other events:

Action Configuration options
Seek cue point none
Set cue point time Time - The time in seconds.

When you select one of these actions in the Event dialog, set the cue point as the receiver.

Actions performed by hotspots

If you add a hotspot to a video, the following hotspot actions can be triggered in response to other events:

Action Configuration options
Toggle visibility True to show - Make the hotspot visible. Uncheck this box to hide the hotspot instead.
Seek show time or hide time True to seek show time - Seek the hotspot's show time. Uncheck this box to seek the hotspot's hide time instead. This action is best used for hotspots that show before or after playback, since the effect during playback is only momentary.
Set times
  • Show time - The time when the hotspot should become visible.
  • Hide time - The time when the hotspot should be hidden.

When you select one of these actions in the Event dialog, set the hotspot as the receiver.

Preview

You can preview the video in the Interactive Video dialog by double-clicking the Video component on the stage. The preview in the dialog doesn't fully render hotspots that include animation.

To preview the component along with other elements in your document, along with events that may reference cue points, exit the Interactive Video dialog and click the Preview button at the upper right corner.

Was this helpful?
How can we improve it?