QVideo 视频播放组件 >=v3.1.0

视频播放组件

QVideo

QVideo

使用说明

基本用法

一个视频播放器。

<QVideo />

可以自定义播放按钮的格式

如果需要自定义播放器的按钮格式的话就需要设置 controls={false} 来让播放器只展示播放界面，而不展示控制按钮，这样就可以自定义按钮样式了。

<QVideo
  source={require('./QVideo.mp4')}
  controls={false}
/>

开启手机静音键后视频是否静音

如果需要设置在开启手机静音键的时候播放视频仍然有声音的话就设置 ignoreSilentSwitch={"ignore"}，如果需要跟随手机静音键的开关来控制播放是否静音，就需要设置 ignoreSilentSwitch=

<QVideo
  source={require('./QVideo.mp4')}
  ignoreSilentSwitch={"ignore"}
/>

属性

source =={ PointPropType }==

播放资源地址，可以是url 也可以是本地资源

resizeMode =={ string }==

视频视图的拉伸格式

repeat =={ bool }==

是否循环播放

paused =={ bool }==

暂停

muted =={ bool }==

静音

volume =={ number }==

音量大小调节 0是静音，1是正常

rate =={ number }==

[iOS] 播放速度调节 0是暂停，1是正常

ignoreSilentSwitch =={ string ('ignore'/ 'obey') }==

[iOS] 手机静音键打开时是播放视频否有声音，ignore为是，obey为否

controls =={ bool }==

是否展示播放按钮，为false的时候，可以自定义播放按钮

onLoadStart =={ function }==

视频开始加载时的回调

onLoad =={ function }==

视频加载完成时的回调

onBuffer [iOS] =={ function }==

视频缓冲的回调

onError =={ function }==

视频加载失败的回调

onProgress =={ function }==

每250ms触发的回调

onEnd =={ function }==

视频播放完成的回调,如果controls设置的false,就是需要自定义播放按钮的时候，这里需要在onEnd回调里设置paused=true等需要触发的操作。

orientation =={ string }==

值 作用
portrait 竖屏
landscape 横屏

说明：

只有在设置controls为 false 时才支持设置orientation，需要配合 QVideoControl 组件使用

依赖版本：

qrn-js v6.4.9 客户端版本：iOS 80011334 adr

视频播放控制组件 QVideoControl

使用说明

在使用视频全屏旋转（orientation）功能时，才需要此组件。 使用此组件的目的是，在旋转时，把视频控制组件同时旋转。 需要把导航栏，底部播放控制，等覆盖在视频组件上方的组件，包裹在QVideoControl中

示例代码

<QVideo
        source={{uri:'http://qhotel.qunarzz.com/video2/20180519/b9d2c3536af246ab258b5682c313b80e.mp4'}}
        paused={this.state.paused}
        orientation={this.state.orientation}
    />

<QVideoControl style={styles.fullScreen1}>
    {/* 顶部 View */}
    <View style={styles.topBar}></View>

    {/* 底部 View */}
    <View style={styles.bottomBar}>

      <View style={{ backgroundColor: "yellow", width: 60, height: 40 }} >
        {this.renderPlay()}
      </View>

      <View style={{ backgroundColor: "gray", width: 60, height: 40 }} >
        {this.renderOrientation('landscape')}
      </View>
    </View>
</QVideoControl>
QLinearGradient
QVideoPlayer