Questions about Z.device.playFullscreenVideo([URL]) and Video Player symbol


#1

Hi everyone,
I have few questions about the function playFullscreenVideo(…):
1- How can I close the video played in full screen? Is there a hook like “.on(“video:finish”, boo)” or something just like that? I tried using the “back” button on my phone but the app reset.
2- Is it possible to know the duration of the video?
3- is it possible to make the video starting from a specific point [time]?


#2

Hi @aron.tessari,

May I ask what you are trying to achieve using the playFullScreenVideo() function? This is great for parsing a video URL string to show a video in fullscreen but there isn’t much customization that comes with it.

Have you tried using the Video Player Symbol that can be added directly while in Studio (Clicking the + in the symbol definitions panel)?

If added to symbol definitions, the Video Player Symbol can be dragged into the hierarchy. When selected in the hierarchy, it’s different properties can be customized, unlike the fullscreen video function. The URL can be then added straight into the properties along with values for whether the video should autoplay, show controls or show the seek bar.

The Video Player symbol does not automatically become fullscreen. To do this we need to change the relative to property to Z.screen or Z.camera and resize, making it fill the device.

The great thing about the Video Player symbol is that it also emits events and has exported functions linked to it. So for example, the video finish event that was mentioned in the question can be accessed by adding:

// Local variable storing a video player node
var video_player = symbol.nodes.video_player;
// Event handler for the finish event
video_player.on("video:finish", () => {
    // Runs when the finish event occurs on the video_player 
    console.log("Video finished!");
});

There are also many other custom events that the symbol emits, including duration of the video, as seen below:

Event Description
video:finish Emitted when the video completes.
video:paused Emitted when the video is paused.
video:buffering Emitted when more data must be downloaded before playback can continue.
video:playing Emitted when playback first occurs.
video:error Emitted when there’s an issue with video playback.
video:aspectratio Emitted when the aspect ratio of the video is known, or subsequently changes.
video:resize Emitted when the width/height in pixels of the video is known, or subsequently changes.
video:time Emitted when the seek position of playback changes.
video:duration Emitted when the duration of the video is known, or subsequently changes.

Furthermore, the symbol has many exported functions allowing the video to be started, paused and restarted at any given time! Examples of these can be seen below:

Parameter
video_player.nodes.control.start( ) Continues playback from the current seek position.
video_player.nodes.control.restart( ) Restarts playback from the start of the video.
video_player.nodes.control.pause( ) Pauses playback at the current seek position.
video_player.nodes.control.time( ) : number Gets the current seek time in milliseconds.
video_player.nodes.control.time(t : number) Sets the current seek time in milliseconds.
video_player.nodes.control.volume( ) : number[] Gets the current volume.
video_player.nodes.control.volume(v: number) : void Sets the current volume.

Hope this helps and please let me know if you have any questions or issues with implementing this!

All the best,
George


Error if setting source in VideoPlayer
#3

Thanks a lot for the answer, it never occurred to me that I can use the videoPlayer to show a video in FullScreen