React-Native视频组件react-native-video使用(安卓版)

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7366019.htmlhtml

一:安装react

在IDE中打开你的项目,而后在IDE的terminal,输入:npm

npm i -S react-native-video

安装第三方的视频组件。react-native

而后,执行如下命令,把下载回来的第三方库链接到本地库中:网络

 react-native link

 

二:使用
在RN的js文件中,引入视频播放组件:ide

import Video from 'react-native-video';

而后,在就可使用这个组件来播放视频了。函数

播放本地视频:ui

<Video
    source={require('./video/xx.mp4')}
    style={styles.播放器样式}
    rate={this.state.rate}                          // 控制暂停/播放,0 表明暂停paused, 1表明播放normal.
    paused={false}
    volume={1}                   // 声音的放大倍数,0 表明没有声音,就是静音muted, 1 表明正常音量 normal,更大的数字表示放大的倍数
    muted={true}                  // true表明静音,默认为false.
    resizeMode='contain'       // 视频的自适应伸缩铺放行为,
    onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数
    onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数
    onProgress={this.onProgress}   //  进度控制,每250ms调用一次,以获取视频播放的进度
    onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
    onError={this.videoError}    // 当视频不能加载,或出错后的回调函数

repeat={false} // 是否重复播放 />

播放网络视频:this

<Video
    source={{uri:'视频url'}}
    style={styles.播放器样式}
    rate={this.state.rate}                          // 控制暂停/播放,0 表明暂停paused, 1表明播放normal.
    paused={false}
    volume={1}                   // 声音的放大倍数,0 表明没有声音,就是静音muted, 1 表明正常音量 normal,更大的数字表示放大的倍数
    muted={true}                  // true表明静音,默认为false.
    resizeMode='contain'       // 视频的自适应伸缩铺放行为,
    onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数
    onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数
    onProgress={this.onProgress}   //  进度控制,每250ms调用一次,以获取视频播放的进度
    onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
    onError={this.videoError}    // 当视频不能加载,或出错后的回调函数

repeat={false} // 是否重复播放 />
相关文章
相关标签/搜索