Playing Videos in ZapWorks Studio

Hi ZapWorks Community,

We’ve had a few questions on how to import and play videos in ZapWorks Studio recently, so I thought I’d share a quick step-by-step guide on how this can be done. :video_camera:

Please note, this is for embedded videos (.mp4, .ogg). If you’d like to learn how to stream hosted videos into your AR experience, then I’d recommend following along with this step-by-step on the documentation site.


Importing and Assigning a Video

  1. Drag / Import your video file into the Media Library.

1

  1. Drag your imported video file into the Hierarchy. This is a texture node, so won’t appear in your scene viewport, because of this, It doesn’t matter where you place this in your Hierarchy.

2

  1. Drag a Plane object into the Hierarchy and rename it Video Plane.

3

For this example I’m using an image tracked project, so I’ve dragged the Plane object onto the target image - making it image tracked.

  1. Select on the Video Plane in the Hierarchy and assign the video to the Materials property.

4

You now need to set the video to start / play. This can be done through events that are fired off within the experience. These events can be anything, but I’ve added a couple of examples below. One for playing the video as soon as the experience launches (ready event) and one when a button is tapped (pointerdown event). You can find these examples below:

Playing a Video when the Experience is Ready

Follows on from the Importing and Assigning a Video steps.

  1. Right-click on the root node at the top of the Hierarchy and add a new → script → ready.

newroot

  1. In the Root-ready script, access the video node by dragging it into the top of the script and selecting Insert local variable. Studio will automatically create a variable declaration using symbol.nodes when you drag a node from the Hierarchy.

variable

  1. Using that variable name (in this case it’s Sample_Video_mp4) you can then call the start function in the ready event, setting the video to play as soon as the experience is launched and ready.

start

Preview / Publish your project.

Playing a Video when a Button is Tapped

Follows on from the Importing and Assigning a Video steps.

  1. Drag an image into the Media Library which will be used as the play button and then drag it into the Hierarchy. For this example, I’ve dragged the image object onto the target image - making it image tracked and scaled it down.

7

  1. Right-click on the image in the Hierarchy and add → new → pointerdown script.

8

  1. In the pointerdown script, access the video node by dragging it into the top of the script and selecting Insert local variable.

9

  1. Using that variable name (in this case it’s Sample_Video_mp4) you can then call the start function in the pointerdown event, setting the video to play as when the button / image is tapped.

10

Preview / Publish your project.

You can also create buttons for pausing and restarting the video, in the same way. You can find the list of functions that the Z.video node fires here, including pause and restart.


I hope this helps!

Please let us know on this thread if you have any issues getting videos to play in ZapWorks Studio, we’ll be more than happy to help.

George

5 Likes

I’ve just tried this on my project with a video and it causes my expeirence to stall when loading via the app or QR code. I used a 720px video, would that be the cause of it?