{"_id":"5a06037234873d0010b3924d","category":{"_id":"5a06037134873d0010b39202","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"project":"578c4badbd223d2000cc1441","parentDoc":null,"user":"578c4a62bd223d2000cc143e","version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"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    onFinish={this._onFinish}\\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 to:\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\n\nYou can also respond to various callbacks:\n* ```onFinish``` is invoked when a video finishes playing (if looping, this is invoked at the end of each loop)\n* ```onUpdateTime``` is invoked every second with the current time transpired in the video, and\n* ```onError``` is called when we encounter an error loading or playing the video.\n\nThe following example illustrates these features.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var VIDEO_REF = \\\"videoref\\\";\\n\\nvar VideoTest = React.createClass({\\n  getInitialState() {\\n    return {\\n      muteVideo: true,\\n      volume: 1,\\n    }\\n  },\\n  \\n  render: function() {\\n    <ViroScene>\\n      <Viro360Video\\n          ref={VIDEO_REF}\\n          paused={false}\\n          source={require('./res/test-video.mp4'}\\n          loop={true} \\n          muted={this.state.muteVideo} \\n          volume={this.state.volume}\\n          onFinish={this._onVideoFinished} \\n          onUpdateTime={this._onUpdateTime}\\n          onError={this._onVideoError} />   \\n      />\\n                           \\n      <ViroText position={[2, -2, -5])} text=\\\"Restart\\\"\\n                onClick={this._restartVideo} \\n                transformBehaviors={[\\\"billboard\\\"]}/>\\n    </ViroScene>\\n  },\\n  \\n  _onVideoFinished(){\\n    console.log(\\\"Video finished!\\\");\\n  },\\n  _onUpdateTime(current, total){\\n    console.log(\\\"Video time update, current: \\\" + current + \\\", total: \\\" + total);\\n  },\\n  _onVideoError(event) {\\n    console.log(\\\"Video loading failed with error: \\\" + event.nativeEvent.error);\\n  },\\n  _restartVideo() {\\n    this.refs[VIDEO_REF].seekToTime(0);\\n  },\\n});\\n      \",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn particular, the example above shows how to respond to the various video callbacks, and provides an example of how to use the ```seekToTime``` function. When the ```<ViroText>``` component is tapped, ```_restartVideo()``` is invoked, which sets the time back to zero.","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 onFinish={this._onFinish}\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 to: * 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 You can also respond to various callbacks: * ```onFinish``` is invoked when a video finishes playing (if looping, this is invoked at the end of each loop) * ```onUpdateTime``` is invoked every second with the current time transpired in the video, and * ```onError``` is called when we encounter an error loading or playing the video. The following example illustrates these features. [block:code] { "codes": [ { "code": "var VIDEO_REF = \"videoref\";\n\nvar VideoTest = React.createClass({\n getInitialState() {\n return {\n muteVideo: true,\n volume: 1,\n }\n },\n \n render: function() {\n <ViroScene>\n <Viro360Video\n ref={VIDEO_REF}\n paused={false}\n source={require('./res/test-video.mp4'}\n loop={true} \n muted={this.state.muteVideo} \n volume={this.state.volume}\n onFinish={this._onVideoFinished} \n onUpdateTime={this._onUpdateTime}\n onError={this._onVideoError} /> \n />\n \n <ViroText position={[2, -2, -5])} text=\"Restart\"\n onClick={this._restartVideo} \n transformBehaviors={[\"billboard\"]}/>\n </ViroScene>\n },\n \n _onVideoFinished(){\n console.log(\"Video finished!\");\n },\n _onUpdateTime(current, total){\n console.log(\"Video time update, current: \" + current + \", total: \" + total);\n },\n _onVideoError(event) {\n console.log(\"Video loading failed with error: \" + event.nativeEvent.error);\n },\n _restartVideo() {\n this.refs[VIDEO_REF].seekToTime(0);\n },\n});\n ", "language": "javascript" } ] } [/block] In particular, the example above shows how to respond to the various video callbacks, and provides an example of how to use the ```seekToTime``` function. When the ```<ViroText>``` component is tapped, ```_restartVideo()``` is invoked, which sets the time back to zero.