Set an embedded video to play full screen in Studio

Community Showcase
#1

Hi everyone,

We’ve created a new Studio project to show you how to set an embedded landscape video to play in full screen. Click here to download the zpp file: embedded_video_full_screen.zpp (13.4 MB)

Please, note that we haven’t set the orientation of the video to change depending on the orientation of your device.

In order to take the user somewhere else once the video has finished playing, we generally add actions to the end of the video. These actions can consist of opening a website URL (see the Launching Website article), launching another zap using the corresponding deep link (see the Deep Links article), or a displaying a subsymbol (Screen Symbol article). They are triggered as soon as the video “finish” event is emitted (click here to read the video finish event documentation).

We hope you’ll enjoy this new Studio project! Feel free to let us know if you have any questions. :slight_smile:
Margaux

4 Likes
Video Play in front of Photosphere
Web AR video issue
#2

Can you provide an example how to change this algorithm to work for vertical video in full screen.

Nice solution and tenx.

#3

Hi @valentin.jesenko,

There’s a couple of small changes you’ll need to make to the example zpp above.

Firstly, you’ll want to rotate the videoPlane object by 90 degrees in the Z-axis, so that the video is in the correct orientation for portrait mode.

When rotating the video its height in landscape mode becomes its width in portrait mode, and its width in landscape mode becomes its height in portrait mode.

Knowing this, all you need to do is reverse the X and Y values in the updateVideoSizing function within the show script node.

Hope this helps.

All the best,
Seb

2 Likes
#4

Sorry for resurrecting this thread back from the dead.

How do we fare when we want to play a streamed video in fullscreen instead of a locally saved file, as it does not have its own symbol in the Hierarchy. I tried linking the video player in the script instead of the video file, but it does not work.

Thanks in advance, can’t wait till when I’m actually contributing to the community instead of always asking :sweat_smile:

Got it! Instead of using the Plane0 in the updateVideoSizing function, I changed to the Video_Player, as it is a plane itself and it works. Maybe I’ll post the full code here later, after I cleaned it up

Edit: ok no, didn’t work sadly

1 Like
#5

Hi @2416b,

Playing a streamed video in fullscreen mode is actually very simple. All you need to do is call the playFullscreenVideo(...) function provided by Z.device and pass in the URL where the video is hosted e.g.

Z.device.playFullscreenVideo("https://ddg67ecygv8rc.cloudfront.net/ZapBoxTutorial/ZapBox1200.mp4");

Hope this helps.

All the best,
Seb