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.
To add the Video component to your project:
- Open the Components panel, then the Media folder.
- 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.
- 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.
- 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)|
|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
- 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.
- A cue point marker appears above the video timeline.
- 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....
- 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
- Move the timeline playhead to where you want to add a hotspot.
- Click the + Hotspot button to the left of the video timeline. A new hotspot track appears under the video timeline.
- 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.
- Adjust the hotspot's position, size, and timing.
- By default, the hotspot 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.
Video component properties
The Video component properties are visible in the Properties panel. (You must exit the Interactive Video dialog.)
|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.|
|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.|
You can see and edit cue point properties when you're in the Interactive Video dialog.
|ID||The cue point ID.|
|Time||The time in seconds when the cue point is set. Can be bound to dynamic data.|
You can see and edit hotspot properties when you're in the Interactive Video dialog.
|ID||The hotspot ID.|
|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:
Events and actions
Learn how to configure events.
EventsEvents sent by the Video component
You can trigger other actions based on the following Video component events:
|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.
If you add a cue point to a video, you can trigger other actions based on the following cue point event:
|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.
If you add a hotspot to a video, you can trigger other actions based on the following hotspot events:
|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.
ActionsActions performed by the Video component
The following Video component actions can be triggered in response to other events:
|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.
If you add a cue point to a video, the following cue point actions can be triggered in response to other events:
|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.
If you add a hotspot to a video, the following hotspot actions can be triggered in response to other events:
|Change visibility||Show hotspot - Make the hotspot visible. Uncheck this box to hide the hotspot instead.|
|Seek show time or hide time||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.|
When you select one of these actions in the Event dialog, set the hotspot as the receiver.
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, or to test any events, exit the Interactive Video dialog and click the Preview button at the upper right corner.