{"_id":"58f7a4c9cbd001190056cc39","__v":0,"category":{"_id":"58f7a4c8cbd001190056cbfc","__v":0,"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"version":{"_id":"58f7a4c8cbd001190056cbf8","__v":1,"project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"project":"578c4badbd223d2000cc1441","parentDoc":null,"user":"578c4a62bd223d2000cc143e","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":10,"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"}