简介
这个组件封装了React-Native平台的播放器组件Video
使用方法:
1.安装:
- 执行命令:
npm i -S react-native-video
- 重新编译项目,执行命令:
react-native link
2.导入原生模块
- iOS 11平台首先找到
AppDelegate.m文件, - 首先导入包，在此文件顶部添加如下代码:
#import <AVFoundation/AVFoundation.h> - 然后,修改代码:
...
[[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 这个文件，在 * dependencies *大括号的方法中添加如下代码：
```compile project(':react-native-video')```
就像这样：
```
dependencies {
compile project(':react-native-video')
}```
3. 如果你的 react-native版本<0.29，那么找到MainActivity.java 这个文件，在最顶部添加：```import com.brentvatne.react.ReactVideoPackage;```
并且在下面的代码中添加：new ReactVideoPackage()
如果你的 react-native版本>=0.29，那么就找到MainApplication.java这个文件，在顶部添加：```import com.brentvatne.react.ReactVideoPackage;```
并且在下面的代码中添加：new ReactVideoPackage()
就像这样：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactVideoPackage()
);
}
### 3. 使用例子:
<Video source={{uri: "background"}} // 视频的URL地址，或者本地地址，都可以.
rate={1.0} // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
volume={1.0} // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
muted={false} // true代表静音，默认为false.
paused={false} // true代表暂停，默认为false
resizeMode="cover" // 视频的自适应伸缩铺放行为，
repeat={true} // 是否重复播放
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} />
// 样式
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
