{"_id":"59bc03d31d2d8d001a344586","category":{"_id":"59bc03d31d2d8d001a344583","version":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":6,"slug":"api-reference","title":"API Reference"},"user":"57bb7defafc18c0e00529cf1","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":2,"createdAt":"2017-09-15T16:46:11.721Z","releaseDate":"2017-09-15T16:46:11.721Z","categories":["59bc03d31d2d8d001a34457e","59bc03d31d2d8d001a34457f","59bc03d31d2d8d001a344580","59bc03d31d2d8d001a344581","59bc03d31d2d8d001a344582","59bc03d31d2d8d001a344583","59bc284b7c3f420010f965e6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-18T04:57:51.135Z","link_external":false,"link_url":"","githubsync":"","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```\n<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```\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    \"9-0\": \"**volume**\",\n    \"9-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    \"8-0\": \"**stereoMode**\",\n    \"8-1\": \"**PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])**\\n\\nSpecifies the alignment mode of the provided stereo image in source. Given image mode alignments are rendered in the order of Lefteye-Righteye. Defaults 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  },\n  \"cols\": 2,\n  \"rows\": 10\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"}
A component that displays a 360 video sphere that surrounds the user. ######Example use: ``` <Viro360Video source={require("./video/myvideo.mp4")} onFinish={this._onFinish} onUpdateTime={this._onUpdateTime} onError={this._videoError} loop={true} paused={false} volume={1.0} /> ``` [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.", "9-0": "**volume**", "9-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**", "8-0": "**stereoMode**", "8-1": "**PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])**\n\nSpecifies the alignment mode of the provided stereo image in source. Given image mode alignments are rendered in the order of Lefteye-Righteye. Defaults 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." }, "cols": 2, "rows": 10 } [/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]