360 Video Player with Touch
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 with Touch symbol component creates a template for adding streamed 360 videos using a gyroscope. This component has touch to rotate controls along with gyro rotation.
Creating a 360 Video Player with Touch Symbol
Section titled “Creating a 360 Video Player with Touch Symbol”A 360 Video Player with Touch symbol can be added into your project by clicking on the plus icon + in the Symbol Definitions panel.
Using a 360 Video Player with Touch Symbol
Section titled “Using a 360 Video Player with Touch Symbol”Drag the 360 Video Player with Touch 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 with Touch node in the Hiearchy 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 with Touch symbol provides 5 references properties:
| Property | Type | Description |
|---|---|---|
| Video Url | string | The URL of the video. |
| Auto Play | boolean | Whether the video should start playing automatically. |
| Show 360 Icon | boolean | Whether the 360 icon should be visible. |
| Loop | boolean | Whether the video should loop after finish. |
| Rotation Speed | float | Sets the speed of the touch rotation (Recommended: 50). |
Exported Functions
Section titled “Exported Functions”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 with Touch symbol also has 7 exported function:
| Function | Description |
|---|---|
| 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. |
Example:
// Local variable storing the 360 Video Player Touch nodeconst 360_Video_Player_Touch = symbol.nodes.360_Video_Player_Touch;
// Calling the pause function360_Video_Player_Touch.nodes.control.pause();Emitted Events
Section titled “Emitted Events”The 360 Video Player Touch also symbol emits the following events:
| 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. |
Example:
// Local variable storing a video player touch nodevar 360_Video_Player_Touch = symbol.nodes.360_Video_Player_Touch;
// Event handler for the paused event360_Video_Player_Touch.on("video:paused", () => { // Runs when the paused event occurs on the 360_Video_Player_Touch console.log("Video paused!");});In the examples,
360_Video_Playeris 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 Touch node in a script by dragging the node into the top of the script.