VideoPano

react组件用来展示360视频的

注意:有些浏览器会限制自动播放,android上只有视频是 muted 时才能自动播放,否则需要用户手势(通常是触摸,鼠标和键盘,但不是游戏手柄)才开始视频播放。

示例:

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

更多视频控制的用法:查看MediaPlayerState

属性

      View props...   查看左侧导航的"View"的属性
autoPlay  PropTypes.bool

在组件加载的时间是否自动播放声音,默认是  true,当playerState属性设置是此属性忽略

loop  PropTypes.bool

播放完后是否自动重复播放,默认是  false

muted  PropTypes.bool

是否静音,默认为  false

onDurationChange?  PropTypes.func

视频duration改变了引起的回调,值可以通过event.nativeEvent.duration取得

onEnded?:  PropTypes.bool

播放完成的回调

onPlayStatusChange?:  PropTypes.bool

播放状态改变的回调

播放的状态---event.nativeEvent.playStatus ,是下面的其中之一: 'closed' | 'loading' | 'error' | 'ended' | 'paused' | 'playing' | 'ready'

onTimeUpdate?:  PropTypes.bool

视频的当前时间改变了触发的回调

视频的当前时间---event.nativeEvent.currentTime

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

控制播放的状态,如没有设置,autoPlay的值决定当组件加载完时是否播放。

playStatus  PropTypes.oneOf(['play', 'pause', 'stop'])

控制播放的状态,如没有设置,autoPlay的值决定当组件加载完时是否播放。这个属性将被废弃,需要迁移到playControl上

playerState  PropTypes.object

playerState是一个MediaPlayerState,控制视频播放的内部状态,当playerState设置了,他的值设置成autoPlaymuted volume playControl属性将被忽略,因为他们会被playerState代替,查看MediaPlayerState

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

一个poster frame的source,直到视频开始播放,如果没有设置,不会显示任何画面,直到视频的第一帧加载

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格式是:{uri: 'http', format: FORMAT, layout: LAYOUT}

format(optional):视频格式,如mp4 webm等等

layout(optional):360视频布局格式,'SPHERE' | 'CUBEMAP_32'

stereo(optional)360视频立体声格式: '2D' | 'TOP_BOTTOM_3D' | 'BOTTOM_TOP_3D' | 'LEFT_RIGHT_3D' | 'RIGHT_LEFT_3D'

metaData(optional):视频元数据,自定义播放器用的


布局格式默认是'SPHERE'(equirectangular) ,立体声默认是'2D',Sourc可以是不同格式的数组源,VideoPano会选择一个浏览器支持的格式,如果格式没有指定,会选择任意一个支持的格式

style  style
      Layout Props...  查看左侧导航的"布局属性"
      Transforms...  查看左侧导航的"三维坐标、变换"
      tintColor   color

      把所有的不透明像素的颜色改变成tintColor

volume   PropTypes.number

音量的值,最小是0,最大是1.0,允许大于1的值,但是这可能会导致限幅/失真,根据硬件而定的

举个例子:音量设置为50%,volume={0.5}