The Video component
The Video component lets you embed a video in your project. 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.
- 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.
Using video with mobile browsers
Mobile browsers may disable video auto-play 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:
- Untick the Autoplay box.
- Tick the Show controls box.
|Name||The component name.|
|Auto-play||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.|
Events and actionsEvents 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 dialogue, set the Video component as the target.
|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 multiple formats, separated by commas.|
When you select one of these actions in the Event dialogue, set the Video component as the receiver.
Learn how to configure events.
This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper-right corner.