react-native-video安装教程及常见问题解决

react-native-video安装教程及常见问题解决

1.安装

npm i react-native-video –save

npm link react-native-video

(1) ios：

如果您想允许其他应用在您的视频组件上播放音乐，请添加：

AppDelegate.m

#import   // import

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
  ...
}

(2)android

如果link失败的话需要执行下面的操作：

android/ settings.gradle

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

android/app/build.gradle

dependencies {
   ...
   compile project(':react-native-video')
}

MainApplication.java

import  com.brentvatne.react.ReactVideoPackage ;

new  ReactVideoPackage（）  //添加这个

2.导入组件

import Video from 'react-native-video';
....

<Video
    ref={(ref: Video) => {
        this.video = ref
    }}
    /* For ExoPlayer */
    /* source={{ uri: 'https://www.youtube.com/api/manifest/dash/id/bf5bb2419360daf1/source/youtube?as=fmp4_audio_clear,fmp4_sd_hd_clear&sparams=ip,ipbits,expire,source,id,as&ip=0.0.0.0&ipbits=0&expire=19000000000&signature=51AF5F39AB0CEC3E5497CD9C900EBFEAECCCB5C7.8506521BFC350652163895D4C26DEE124209AA9E&key=ik0', type: 'mpd' }} */  外链
    source={require('./video/bb.mp4')} // 本地
    style={styles.fullScreen}
    rate={this.state.rate}                          // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
    paused={false}
    volume={1}                   // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
    muted={true}                  // true代表静音，默认为false.
    resizeMode='cover'       // 视频的自适应伸缩铺放行为，
    onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数
    onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数
    onProgress={this.onProgress}   //  进度控制，每250ms调用一次，以获取视频播放的进度
    onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
    onError={this.videoError}    // 当视频不能加载，或出错后的回调函数
    onAudioBecomingNoisy={this.onAudioBecomingNoisy}
    onAudioFocusChanged={this.onAudioFocusChanged}
    repeat={false}                            // 是否重复播放
/>

 style样式：
fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
},

想要控制视频的暂停和播放，可以设置paused，例如

paused={this.state.paused}

paused为true是暂停状态，false是播放状态

<Button title={this.state.paused === false ? '暂停' : '播放'} onPress={this._play}/>
_play() {
    this.setState({
        paused: !this.state.paused
    })
}

上面的代码就是在视频下放有个按钮，是播放状态的时候按钮显示 “暂停” 两字，暂停的时候显示“播放”。

点击按钮改变this.state.paused的值，以此来控制视频的播放和暂停。

3.常见错误

react ^0.51.0

react-native-video ^2.0.0

报错： react-native-video:prepareReleaseDependencies

解决如下：

react-native-video -> android -> build.gradle

dependencies {
provided "com.facebook.react:react-native:+"
...
}

改成

dependencies {
compile "com.facebook.react:react-native:+"
...
}