Video

The Video component enables simple importation of supported video formats. Videos are great for when you want 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.

Supported Video Formats

Zapworks Designer supports videos in the following formats:

  • .mov
  • .avi
  • .mp4
  • .mpeg
  • .3gp
  • .mkv

Videos must be under 200MB in order to be successfully uploaded into the system. If you have a video that is larger than 200MB, 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 user's bandwidth, therefore, quality can alter based on this information. Designer will do its best to maintain the highest video quality during runtime.

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.

Adding a Video component to an AR scene

Editing a Video

When you select your video on the Canvas, the properties of your video are editable via the Properties Panel.

Editing a Video component in an AR scene

Here, you can edit the following:

Property Description
Content Allow your Video to Autoplay when the experience is launched, Loop when it has finished and choose whether it will Stop other media from playing at the same time as the Video. You can also Replace the Video with another video you have uploaded to the Media Library.
Transforms Edit the Size (Width and Height), Position (X/Y/Z coordinates), and Rotation (degrees on the X/Y/Z axes) of the Video. You can also Mirror the component and change the component's layer Order (forwards or backwards) relative to other scene components.
Curve Add a curve to the Video and choose whether its curve direction is None, In or Out, as well as the degree of Curvature. You can also have it Wrap around a curved target if there is one present. See the Curved Image Tracking documentation for more.
Appearance Edit the Opacity, add a Frame and change its Corner Radius. You can also add a border to the video and change the Border Width and Border Color.
Actions Create interactivity by adding an on finish Action to the Video.
Transition Effects Add an Enter or Exit transition effect to the Video.

Choosing Autoplay on your video hides the UI on start. Enabling Autoplay and Loop hides & disables the UI permanently.

Alpha Video

Adding Video Transparency from Properties Panel

We have a Video Transparency applet that allows you to easily remove solid color backgrounds in videos , making them transparent. This feature is particularly effective for videos with uniform green or blue backgrounds.

For videos that are already part of your media library and have been added to your scene, you can still apply the transparency effect without needing to use the applet.

Using the properties panel to add Video Transparency
  1. Add a video to your scene and head to it's properties, and click Video transparency.
  2. Click the Transparency color picker and then click on the eye dropper. Then click on the background color of the video.
  3. Use the other settings to adjust the transparency of the video.
  4. You can also click the Open in Applet Button, if you wish to make adjustments in a more detailed view and playback the video.

Designer supports correctly prepared alpha channel transparency videos, either in WebM format or any video codec that supports alpha channel videos, like the QuickTime ProRess 4444. Once you upload your alpha video into the Designer media library, your video will appear with the transparent areas. If it doesn't, then the video has not been correctly prepared.

This article covers alpha video preparation using Premiere Pro, though the process will be similar in other software.

Creating Alpha videos in Adobe Premiere Pro

Creating an Alpha Video in Premiere Pro.


Once your video is uploaded into Premiere Pro and you are in edit mode, follow these steps to make it an alpha video.

  1. Click on the Effects tab and use the search bar to find the Ultra Key effect.

  2. Drag the Ultra Key effect onto your video sequence in the timeline.

  3. Within the Effect Controls tab, find the Ultra Key properties and click on the Key Color dropper.

  4. Click on the background you want to remove in the video, ensuring the Key Color box changes to the background colour.

  5. Click on the Output dropdown box and select Alpha Channel to check how it looks.

  6. You can then play around with the settings within the Matte Generation and Matte Cleanup properties to adjust it to your liking.

  7. Once satisfied, click on the Export tab.

  8. Click the dropdown menu next to the Presets property and select the Apple ProRes4444 XQ with alpha (Quicktime) preset. You can try others but this is the one we have found most consistent.

  9. Check that the Format dropdown shows Quicktime.

  10. Click on the Video settings tab and click on Match Source if you want the video to maintain its original resolution and aspect ratio. Otherwise, you can uncheck the other settings and change the Frame Size, Frame Rate, and Aspect Ratio.

Designer supports videos up to 200 MB. Lowering the frame size will allow you to minimize your video file size. We recommend starting with a lower frame size and testing to see how quickly it loads and if the level of detail is appropriate for the experience. If not, scale the frame size accordingly.

zapcode branded_zapcode i