Skip to content

360 Video Player

Studio is being deprecated, please head over to the documentation page for Mattercraft, our most advanced 3D tool for the web, where you can find the most recent information and tutorials.

The 360 Video Player symbol component creates a template for adding streamed 360 videos using a gyroscope. This component has touch to wake control UI which can play, pause and restart the video along with built-in error messages.

A 360 Video Player symbol can be added into your project by clicking on the plus icon + in the Symbol Definitions panel.

Drag the 360 Video Player symbol into the Hierarchy from the Symbol Definitions panel, creating an instance of it.

On first import, the Import Notes will appear giving step-by-step instructions on how the symbol can be used. The notes can be reaccessed at any time by clicking on the burger menu at the top of the Hierarchy and opening Import or Modification notes.

Select on the 360 Video Player node in the Hierarchy and input a hosted video file URL into the Video Url property. The symbol uses Z.Video to display the streaming video. Check out the Z.Video docs for a more detailed explanation on video hosting.

Finally, change the remaining Referenced properties values.

The 360 Video Player symbol provides 5 references properties:

PropertyTypeDescription
Video UrlstringThe URL of the video.
Auto PlaybooleanWhether the video should start playing automatically.
Show ControlsbooleanWhether the video controls should be visible.
Show Seek BarbooleanWhether the bar depicting the current playback time should be visible.
Show 360 IconbooleanWhether the 360 icon should be visible.

If the Auto Play property is not turned on, then the video can be started at any time throughout the experience by using the start exported function.

The 360 Video Player symbol also has 7 exported function:

FunctionDescription
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( ) : numberGets 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) : voidSets the current volume.

Example:

// Local variable storing the 360 Video Player node
const 360_Video_Player = symbol.nodes.360_Video_Player;
// Calling the start function
360_Video_Player.nodes.control.start();

The 360 Video Player also symbol emits the following events:

EventDescription
video:finishEmitted when the video completes.
video:pausedEmitted when the video is paused.
video:bufferingEmitted when more data must be downloaded before playback can continue.
video:playingEmitted when playback first occurs.
video:errorEmitted when there’s an issue with video playback.
video:aspectratioEmitted when the aspect ratio of the video is known, or subsequently changes.
video:resizeEmitted when the width/height in pixels of the video is known, or subsequently changes.
video:timeEmitted when the seek position of playback changes.
video:durationEmitted when the duration of the video is known, or subsequently changes.

Example:

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

In the examples, 360_Video_Player is a placeholder variable, and should be replaced by the name of the node the function/event is being called on. You can create a variable for your 360 Video Player node in a script by dragging the node into the top of the script.