{"__v":0,"_id":"5841ca79ae05ac2500ba264a","category":{"version":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","_id":"5841ca79ae05ac2500ba2623","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":1,"slug":"develop","title":"Develop"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","version":{"__v":1,"_id":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","createdAt":"2016-12-02T19:24:41.091Z","releaseDate":"2016-12-02T19:24:41.091Z","categories":["5841ca79ae05ac2500ba2622","5841ca79ae05ac2500ba2623","5841ca79ae05ac2500ba2624","5841ca79ae05ac2500ba2625","5841ca79ae05ac2500ba2626"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.0.46","version":"0.0.46"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T18:29:46.178Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":12,"body":"Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Video Screen\"\n}\n[/block]\nThe ```<ViroVideo>``` component can be used to display video on a 2D screen. Like all UI elements, you specify the position in world space. You can also set the width and height of the screen, and set the video via the ```source``` attribute, as shown in the example below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroVideo\\n    source={require('./video/myvid.mp4')}\\n    height={2}\\n    width={2}\\n    loop={true}\\n    position={[0,2,-5]}\\n />\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nSupported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, ```{uri:\"http://example.org/myvideo.mp4\"}```. To invoke with a local file resource, use require: ```require('./myvideo.mp4');```. \n\nFor a full list of properties, refer to the [ViroVideo](doc:virovideo-2-compare) reference.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"360 Video\"\n}\n[/block]\nSpherical videos that surround the user can be displayed via the ```<Viro360Video>``` component. These videos are displayed as a [scene background](doc:scenes#scene-backgrounds) , behind all other UI elements.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Viro360Video\\n    source={require(\\\"./video/myvideo.mp4\\\")}\\n    onLoadEnd={this._onLoadEnd}\\n    loop={false} \\n/>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAs with 2D videos, 360 video sources may be remote URLs or local file resources. For a full list of properties, refer to the [Viro360Video](doc:viro360video-1) reference.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manipulating Video\"\n}\n[/block]\nBoth the ```<ViroVideo>``` and ```<Viro360Video>``` components enable you:\n* Adjust volume via the ```volume``` property\n* Mute the video via the ```muted``` property\n* Pause the video by setting the ```paused``` property\n* Seek the video to a specific time in seconds by invoking the ```seekToTime(time)``` method","excerpt":"Adding video to your scenes","slug":"video","type":"basic","title":"Video"}

Video

Adding video to your scenes

Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen. [block:api-header] { "type": "basic", "title": "Video Screen" } [/block] The ```<ViroVideo>``` component can be used to display video on a 2D screen. Like all UI elements, you specify the position in world space. You can also set the width and height of the screen, and set the video via the ```source``` attribute, as shown in the example below. [block:code] { "codes": [ { "code": "<ViroVideo\n source={require('./video/myvid.mp4')}\n height={2}\n width={2}\n loop={true}\n position={[0,2,-5]}\n />", "language": "javascript" } ] } [/block] Supported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, ```{uri:"http://example.org/myvideo.mp4"}```. To invoke with a local file resource, use require: ```require('./myvideo.mp4');```. For a full list of properties, refer to the [ViroVideo](doc:virovideo-2-compare) reference. [block:api-header] { "type": "basic", "title": "360 Video" } [/block] Spherical videos that surround the user can be displayed via the ```<Viro360Video>``` component. These videos are displayed as a [scene background](doc:scenes#scene-backgrounds) , behind all other UI elements. [block:code] { "codes": [ { "code": "<Viro360Video\n source={require(\"./video/myvideo.mp4\")}\n onLoadEnd={this._onLoadEnd}\n loop={false} \n/>", "language": "javascript" } ] } [/block] As with 2D videos, 360 video sources may be remote URLs or local file resources. For a full list of properties, refer to the [Viro360Video](doc:viro360video-1) reference. [block:api-header] { "type": "basic", "title": "Manipulating Video" } [/block] Both the ```<ViroVideo>``` and ```<Viro360Video>``` components enable you: * Adjust volume via the ```volume``` property * Mute the video via the ```muted``` property * Pause the video by setting the ```paused``` property * Seek the video to a specific time in seconds by invoking the ```seekToTime(time)``` method