RN-第三方组件之react-native-video播放音视频

react-native-video，RN上面的播放器
官网介绍：https://www.npmjs.com/package/react-native-video

安装

npm i -S react-native-video
react-native link

使用：
iOS:
AppDelegate.m

#import <AVFoundation/AVFoundation.h>   先导入框架
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow 
  ...
}

Android：

1.找到 android/settings.gradle 这个文件，在其中加入以下代码：(貌似自动添加好了)
    include ':react-native-video'
    project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

2. 找到 android/app/build.gradle 这个文件，添加compile project(':react-native-video')(貌似自动添加好了)
    dependencies {
       ...
       compile project(':react-native-video')
    }

3. react-native >= 0.29.0，找到MainApplication.java这个文件，
在顶部添加：import com.brentvatne.react.ReactVideoPackage;(貌似自动添加好了)

   并且在下面的代码中添加：new ReactVideoPackage()

    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactVideoPackage()(貌似自动添加好了)
      );
    }

配置完成，接下来就是使用了，使用也很简单：

<Video
                      source={require('./background.mp4')} // 视频的URL地址，或者本地地址，都可以.
                      //source={require('./music.mp3')} // 还可以播放音频，和视频一样
                      //source={{uri:'http://......'}}
                      ref='player'
                      rate={this.state.isPlay?1:0}                   // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
                      volume={1.0}                 // 声音的放声音的放大倍数大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
                      muted={false}                // true代表静音，默认为false.
                      paused={false}               // true代表暂停，默认为false
                      resizeMode="contain"           // 视频的自适应伸缩铺放行为，contain、stretch、cover
                      repeat={false}                // 是否重复播放
                      playInBackground={false}     // 当app转到后台运行的时候，播放是否暂停
                      playWhenInactive={false}     // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
                      onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
                      onLoad={this.setDuration}    // 当视频加载完毕时的回调函数
                      onProgress={this.setTime}    //  进度控制，每250ms调用一次，以获取视频播放的进度
                      onEnd={this.onEnd}           // 当视频播放完毕后的回调函数
                      onError={this.videoError}    // 当视频不能加载，或出错后的回调函数
                      style={styles.backgroundVideo}
                  />

另外 还有两个方法提供使用，貌似只支持iOS

// Later to trigger fullscreen 
this.refs.player.presentFullscreenPlayer()//会调用系统给的播放器进行播放
 
// To set video position in seconds (seek) 
this.refs.player.seek(100)//跳转到指定的秒数位置
 

demo:https://github.com/chjwrr/ThirdPartyToolTest

DDBDBB7C-A4EA-4D92-9D72-A3FCB039FF2E.png