Video
The Video component enables simple importation of supported video formats. Videos are great for when you're wanting to add extra detail and further make your experience feel like it's coming to life.
Designer supports a variety of video formats including Alpha Video, a video format using areas of transparency.
Adding a Video
To add a video to your scene, select the video icon from the components panel and drag the desired video onto your canvas.
Editing a Video
When you select your video in the viewport, the properties of your video are editable via the Properties Panel.
Here, you can edit the following:
| Option | Description |
|---|---|
| Transforms | Edit the size (Width/Height), position (X/Y Co-ordinates) and rotation (Degree) of your video. |
| Order | Move your video forward and backwards relative to other objects in your scene. |
| Mirror | Flips the video on the X or Y axis. |
| Content | Choose if you want your video to autoplay or loop*. |
| Action | Add an on tap action. |
| Appearance | Edit the opacity, frame, corner radius, border width and border colour of your image. |
| Transition | Add an entrance or exit transition. |
*Choosing autoplay on your video hides the UI on start. Enabling autoplay and loop hides & disables the UI permanently.
Supported Video Formats
ZapWorks Designer supports videos in the following formats:
- .mov
- .avi
- .mp4
- .mpeg
- .3gp
- .mkv
Videos must be under 100MB in order to be successfully uploaded into the system. If you have a video that is larger than 100MB, try shortening the video or setting it to loop.
Video Quality
Videos uploaded to Designer are HLS streamed when the experience is launched. Video quality is determined by the users bandwidth, therefore, quality can alter based on this information. Designer will do its best to maintain the highest video quality during runtime.
Alpha Video
Designer supports transparent alpha video in the WebM format. To use alpha video, simply import the supported video format into your scene through the components panel. Designer will automatically convert a video in the WebM format to one that contains transparent areas. Once imported, drag it into your canvas, using the same method as a standard video component.
To convert your MOV or MP4 file into a WebM format, we recommend using Rotato, which also allows you to test if your video contains an alpha channel. To learn more about WebM, and find even more free and commercial tools available for creating and publishing content in the supported format, click here.