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