簡介
這個組件封裝了React-Native平臺的播放器組件Video
使用方法:
1.安裝:
- 執(zhí)行命令:
npm i -S react-native-video
- 重新編譯項(xiàng)目,執(zhí)行命令:
react-native link
2.導(dǎo)入原生模塊
- iOS 11平臺首先找到
AppDelegate.m文件, - 首先導(dǎo)入包，在此文件頂部添加如下代碼:
#import <AVFoundation/AVFoundation.h> - 然后,修改代碼:
...
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow
...
}
- Android 平臺相對復(fù)雜:
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} // 聲音的放大倍數(shù)蹄溉，0 代表沒有聲音咨油，就是靜音muted, 1 代表正常音量 normal，更大的數(shù)字表示放大的倍數(shù)
muted={false} // true代表靜音柒爵，默認(rèn)為false.
paused={false} // true代表暫停役电，默認(rèn)為false
resizeMode="cover" // 視頻的自適應(yīng)伸縮鋪放行為，
repeat={true} // 是否重復(fù)播放
playInBackground={false} // 當(dāng)app轉(zhuǎn)到后臺運(yùn)行的時候餐弱，播放是否暫停
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown. 僅適用于IOS
onLoadStart={this.loadStart} // 當(dāng)視頻開始加載時的回調(diào)函數(shù)
onLoad={this.setDuration} // 當(dāng)視頻加載完畢時的回調(diào)函數(shù)
onProgress={this.setTime} // 進(jìn)度控制宴霸，每250ms調(diào)用一次，以獲取視頻播放的進(jìn)度
onEnd={this.onEnd} // 當(dāng)視頻播放完畢后的回調(diào)函數(shù)
onError={this.videoError} // 當(dāng)視頻不能加載膏蚓，或出錯后的回調(diào)函數(shù)
style={styles.backgroundVideo} />
// 樣式
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
