{"_id":"5bec8a15287d1b00426efe01","category":{"_id":"5bec8a15287d1b00426efdcb","version":"5bec8a15287d1b00426efe54","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":8,"slug":"api-reference","title":"API Reference"},"user":"57bb7defafc18c0e00529cf1","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"5bec8a15287d1b00426efe54","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5ba2b5747091250003437507","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5bec8a15287d1b00426efdc6","5bec8a15287d1b00426efdc7","5bec8a15287d1b00426efdc8","5bec8a15287d1b00426efdc9","5bec8a15287d1b00426efdca","5bec8a15287d1b00426efdcb","5bec8a15287d1b00426efdcc","5bec8a15287d1b00426efdcd","5bec8a15287d1b00426efdce"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.12.0","version":"2.12.0"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-18T04:57:51.135Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"A component that displays a 360 video sphere that surrounds the user. \n\n######Example use:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Viro360Video\\n    source={require(\\\"./video/myvideo.mp4\\\")}\\n    onFinish={this._onFinish}\\n    onUpdateTime={this._onUpdateTime}\\n    onError={this._videoError}\\n    loop={true}\\n    paused={false}\\n    volume={1.0} />\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Required props\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**PropTypes.oneOfType( [PropTypes.shape( {uri:PropTypes.string} ), PropTypes.number])**\\n\\nThe video source, a remote URL or a local file resource. MPEG videos accepted.\\n\\nTo invoke with remote url:\\n```\\n{uri:\\\"http://example.org/myvideo.mp4\\\"}\\n```\\n\\nTo invoke with local source:\\n```\\nrequire('./myvideo.mp4');\\n```\",\n    \"0-0\": \"**source**\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n##Optional Props\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**loop**\",\n    \"1-0\": \"**muted**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**PropTypes.bool**\\n\\nSet to true to loop the video. This is set to false by default.\",\n    \"1-1\": \"**PropTypes.bool**\\n\\nSet to true to mute the video audio. This is set to false by default.\",\n    \"5-0\": \"**onFinish**\",\n    \"5-1\": \"**PropTypes.func**\\n\\nCallback that is called when the video is finished playing. This function isn't called at the end of a video if looping is enabled.\",\n    \"7-0\": \"**paused**\",\n    \"7-1\": \"**PropTypes.bool**\\n\\nSet to true to pause the video. This is set to false by default.\",\n    \"10-0\": \"**volume**\",\n    \"10-1\": \"**PropTypes.number**\\n\\nA number represented volume from 0 to 1. Max volume is equal to 1. Min volume is equal to 0. This is set to 1 by default.\",\n    \"6-0\": \"**onUpdateTime**\",\n    \"6-1\": \"**PropTypes.func**\\n\\nCallback that is called when the current playback position has changed.\\n\\nFor example:\\n```  \\n_onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds) {\\n    // Update Seek Bar or custom UI\\n}\\n```\",\n    \"4-1\": \"**PropTypes.func**\\n\\nCallback invoked when the 360 Video fails to load. The error message is contained in event.nativeEvent.error\",\n    \"4-0\": \"**onError**\",\n    \"9-0\": \"**stereoMode**\",\n    \"9-1\": \"**PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])**\\n\\nSpecifies the alignment mode of the provided stereo video in source. The video will be rendered in the given order, the first being the left eye, the next the right eye.\\n\\nFor example, leftRight will render the left half of the video to the left eye, and the right half of the video to the right eye. Similarly, topBottom will render the top half of the video to the left eye, and the bottom half of the video to the right eye. \\n\\nDefaults to none.\",\n    \"2-0\": \"**onBufferEnd**\",\n    \"3-0\": \"**onBufferStart**\",\n    \"2-1\": \"**PropTypes.func**\\n\\nCallback invoked when the underlying video component has finished buffering.\",\n    \"3-1\": \"**PropTypes.func**\\n\\nCallback invoked when video begins buffering. Called at least once at the beginning of playback/video creation.\",\n    \"8-0\": \"**rotation**\",\n    \"8-1\": \"**PropTypes.arrayOf(PropTypes.number)**\\n\\nThe rotation of the box around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.\"\n  },\n  \"cols\": 2,\n  \"rows\": 11\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"Sets the video to the specified time in seconds. \\n\\n|Parameters    | Description |        \\n| ------------- |:------------- |\\n|timeInSeconds     | Number of seconds into video to seek to. |\",\n    \"h-0\": \"seekToTime(timeInSeconds: number)\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"setNativeProps(nativeProps: object)\",\n    \"0-0\": \"A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on [Direct Manipulation](https://facebook.github.io/react-native/docs/direct-manipulation.html) for more information.\\n\\n|Parameter|Description|\\n|---|---|\\n|nativeProps | an object where the keys are the properties to set and the values are the values to set  |\\n\\nFor example, setting position natively would look like this:\\n\\n```\\ncomponentRef.setNativeProps({\\n    position : [0, 0, -1]\\n});\\n```\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]","excerpt":"","slug":"viro360video-1","type":"basic","title":"Viro360Video"}

Getting Started

iOS - Platform Setup

Android - Platform Setup

Basics

Augmented Reality

Enhanced Scenes

Design

Other

API Reference

Viro360Video

A component that displays a 360 video sphere that surrounds the user. ######Example use: [block:code] { "codes": [ { "code": "<Viro360Video\n source={require(\"./video/myvideo.mp4\")}\n onFinish={this._onFinish}\n onUpdateTime={this._onUpdateTime}\n onError={this._videoError}\n loop={true}\n paused={false}\n volume={1.0} />", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Required props [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-1": "**PropTypes.oneOfType( [PropTypes.shape( {uri:PropTypes.string} ), PropTypes.number])**\n\nThe video source, a remote URL or a local file resource. MPEG videos accepted.\n\nTo invoke with remote url:\n```\n{uri:\"http://example.org/myvideo.mp4\"}\n```\n\nTo invoke with local source:\n```\nrequire('./myvideo.mp4');\n```", "0-0": "**source**" }, "cols": 2, "rows": 1 } [/block] ##Optional Props [block:parameters] { "data": { "0-0": "**loop**", "1-0": "**muted**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**PropTypes.bool**\n\nSet to true to loop the video. This is set to false by default.", "1-1": "**PropTypes.bool**\n\nSet to true to mute the video audio. This is set to false by default.", "5-0": "**onFinish**", "5-1": "**PropTypes.func**\n\nCallback that is called when the video is finished playing. This function isn't called at the end of a video if looping is enabled.", "7-0": "**paused**", "7-1": "**PropTypes.bool**\n\nSet to true to pause the video. This is set to false by default.", "10-0": "**volume**", "10-1": "**PropTypes.number**\n\nA number represented volume from 0 to 1. Max volume is equal to 1. Min volume is equal to 0. This is set to 1 by default.", "6-0": "**onUpdateTime**", "6-1": "**PropTypes.func**\n\nCallback that is called when the current playback position has changed.\n\nFor example:\n``` \n_onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds) {\n // Update Seek Bar or custom UI\n}\n```", "4-1": "**PropTypes.func**\n\nCallback invoked when the 360 Video fails to load. The error message is contained in event.nativeEvent.error", "4-0": "**onError**", "9-0": "**stereoMode**", "9-1": "**PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])**\n\nSpecifies the alignment mode of the provided stereo video in source. The video will be rendered in the given order, the first being the left eye, the next the right eye.\n\nFor example, leftRight will render the left half of the video to the left eye, and the right half of the video to the right eye. Similarly, topBottom will render the top half of the video to the left eye, and the bottom half of the video to the right eye. \n\nDefaults to none.", "2-0": "**onBufferEnd**", "3-0": "**onBufferStart**", "2-1": "**PropTypes.func**\n\nCallback invoked when the underlying video component has finished buffering.", "3-1": "**PropTypes.func**\n\nCallback invoked when video begins buffering. Called at least once at the beginning of playback/video creation.", "8-0": "**rotation**", "8-1": "**PropTypes.arrayOf(PropTypes.number)**\n\nThe rotation of the box around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees." }, "cols": 2, "rows": 11 } [/block] [block:api-header] { "title": "Methods" } [/block] [block:parameters] { "data": { "0-0": "Sets the video to the specified time in seconds. \n\n|Parameters | Description | \n| ------------- |:------------- |\n|timeInSeconds | Number of seconds into video to seek to. |", "h-0": "seekToTime(timeInSeconds: number)" }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "h-0": "setNativeProps(nativeProps: object)", "0-0": "A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on [Direct Manipulation](https://facebook.github.io/react-native/docs/direct-manipulation.html) for more information.\n\n|Parameter|Description|\n|---|---|\n|nativeProps | an object where the keys are the properties to set and the values are the values to set |\n\nFor example, setting position natively would look like this:\n\n```\ncomponentRef.setNativeProps({\n position : [0, 0, -1]\n});\n```" }, "cols": 1, "rows": 1 } [/block]