• Studio
• Subsymbols
• Templates

The Video Player symbol is a component for displaying streaming video in the 3D view using a URL to a hosted video file.

The URL needs to link directly to a video file as opposed to one uploaded to a video hosting site such as Vimeo or YouTube. The server hosting the video file also needs to support range requests in order for the video to play properly across all devices. We recommend using a CDN for faster, more scalable video serving e.g. AWS CloudFront or CloudFlare.

It comes complete with user control UI as well as emitted events and exported functions for controlling video playback from outside the symbol.

Creating a Video Player Symbol

Creating a Video Player Symbol

The Video Player symbol can be added to your project by clicking on the plus icon from the Symbol Definitions panel, then selecting the 'Video Player' component. Clicking 'Create' will add the subsymbol to the list of Symbol Definitions.

Using a Video Player Symbol

First, drag the Video Player symbol into your Hierarchy to create an instance of it. Then, with the instance selected in the Hierarchy, head to the Properties panel to edit its settings.

The settings for a Video Player symbol are as follows:

Video Player Symbol Settings

Supported Video Format

The Video Player symbol uses Z.Video to display the streaming video.

The following format is supported across a wide range of mobile devices, and is the recommended format for video played with Z.Video:

• MP4
• "Web-optimized" with the index at the start of the file
• Baseline or Main profile
• 800 kbps bitrate in order to support playback over cellular connections

Z.Video also supports HLS (HTTP Live Streaming), a format that automatically adjusts the quality of a video stream between multiple bitrates and resolutions, based on the bandwidth capacity of a users device. For more information see the Wikipedia article.

Emitted Events

A Video Player symbol emits the following events:

Example

// 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!");
});

Exported Functions

A Video Player symbol exports the following functions:

Example

// Local variable storing a video player node
var video_player = symbol.nodes.video_player;
// Calling the start function
video_player.nodes.control.start();

Related information

• Z.Video