VideoPano #

A react component for displaying 360 video.

Note: Auto-play is restricted on some browsers. For example on Chrome Android, auto-play only works if the video is muted, otherwise a user gesture (typically touch, mouse, and keyboard but not gamepad) is required to begin video playback.

Example Usage:

<VideoPano source={{uri: 'assets/my-video.webm'}} />

For an example of using with VideoControls, see MediaPlayerState

Props #

autoPlay?: PropTypes.bool #

Whether video starts playing automatically when component is loaded. Auto-play is restricted on some browsers due to security considerations. Default is true. Ignored when playerState property is set.

loop?: PropTypes.bool #

Whether the video is replayed when finished. Default is false.

muted?: PropTypes.bool #

Whether the video is muted. Default is false. Ignored when playerState property is set.

onDurationChange?: PropTypes.func #

Option callback evoked when video duration changed. event.nativeEvent.duration - the duration of video

onEnded?: PropTypes.func #

Option callback evoked when video is done playing.

onPlayStatusChange?: PropTypes.func #

Option callback evoked when video play status changed. event.nativeEvent.playStatus - the play status of video: play status is one of 'closed' | 'loading' | 'error' | 'ended' | 'paused' | 'playing' | 'ready'

onTimeUpdate?: PropTypes.func #

Option callback evoked when video currentTime of video changed. event.nativeEvent.currentTime - the currentTime of video

playControl?: PropTypes.oneOf(['play', 'pause']) #

Controls the playback. If not set, the value of autoPlay determines whether the video plays when the component is loaded. Ignored when playerState property is set.

playerState?: PropTypes.object #

playerState - playerState is a MediaPlayerState that controls video playback with its inner state. When playerState is set, the value of autoPlay, muted volume and playControl properties is ignored as they will be set by playerState instead. See MediaPlayerState

poster?: PropTypes.oneOfType([ PropTypes.shape({ uri: PropTypes.string, }), // Opaque type returned by require('./image.jpg') PropTypes.number, ]) #

Source for a poster frame to show until the video starts playing. If not set, nothing will display until first frame of the video is loaded.

source?: PropTypes.oneOfType([ PropTypes.shape({ uri: PropTypes.string, format: PropTypes.string, layout: PropTypes.string, stereo: PropTypes.string, metaData: PropTypes.any, }), PropTypes.arrayOf( PropTypes.shape({ uri: PropTypes.string, format: PropTypes.string, layout: PropTypes.string, stereo: PropTypes.string, metaData: PropTypes.any, }) ), ]) #

source of video in the form of {uri: 'http', format: FORMAT, layout: LAYOUT}

format(optional): the video format, e.g mp4, webm, etc.

layout(optional): the layout format of 360 video: 'SPHERE' | 'CUBEMAP_32'

stereo(optional): the stereo format of 360 video: '2D' | 'TOP_BOTTOM_3D' | 'BOTTOM_TOP_3D' | 'LEFT_RIGHT_3D' | 'RIGHT_LEFT_3D'

metaData(optional): the video meta data, used for customized video player

If layout is not a supported layout format, it'll by default use 'SPHERE'(equirectangular) If stereo is not a supported stereo format, it'll by default use '2D' Source can be an array of sources with different formats, and VideoPano will choose one of the formats that current browser supports. If format is not specified, it can be chose whatever format is supported.

style?: style #

tintColor color

Changes the color of all the non-transparent pixels to the tintColor.

volume?: PropTypes.number #

The volume of the video(0.0 ~ 1.0) Default is 1.0

You can file an issue on GitHub if you see a typo or error on this page!