Viro360Video

A component that displays a 360 video sphere that surrounds the user.

Example use:

JavaScript

<Viro360Video
    source={require("./video/myvideo.mp4")}
    onFinish={this._onFinish}
    onUpdateTime={this._onUpdateTime}
    onError={this._videoError}
    loop={true}
    paused={false}
    volume={1.0}
/>

Props

source (* required)

Type	Description
source	PropTypes.oneOfType( [PropTypes.shape( {uri:PropTypes.string} ), PropTypes.number])The video source, a remote URL or a local file resource. MPEG videos accepted.To invoke with remote url:{uri:"http://example.org/myvideo.mp4"}To invoke with local source:require('./myvideo.mp4');

loop

Type	Description
	PropTypes.boolSet to true to loop the video. This is set to false by default.

muted

Type	Description
	PropTypes.boolSet to true to mute the video audio. This is set to false by default.

onBufferEnd

Type	Description
	PropTypes.funcCallback invoked when the underlying video component has finished buffering.

onBufferStart

Type	Description
	PropTypes.funcCallback invoked when video begins buffering. Called at least once at the beginning of playback/video creation.

onError

Type	Description
	PropTypes.funcCallback invoked when the 360 Video fails to load. The error message is contained in event.nativeEvent.error

onFinish

Type	Description
	PropTypes.funcCallback that is called when the video is finished playing. This function isn't called at the end of a video if looping is enabled.

onUpdateTime

Type	Description
	PropTypes.funcCallback that is called when the current playback position has changed.For example: _onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds) { // Update Seek Bar or custom UI}

paused

Type	Description
	PropTypes.boolSet to true to pause the video. This is set to false by default.

rotation

Type	Description
	PropTypes.arrayOf(PropTypes.number)The rotation of the box around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.

stereoMode

Type

Description

PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])Specifies 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.For 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. Defaults to none.

volume

Type	Description
	PropTypes.numberA 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.

Methods

setNativeProps(nativeProps)

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 for more information.

Parameter	Type	Description
nativeProps	object	an object where the keys are the properties to set and the values are the values to set

JavaScript

componentRef.setNativeProps({ position: [0, 0, -1] });