react-native-video 安装及常见问题
github:https://github.com/react-native-community/react-native-video
1.安装
npm i react-native-video –save
npm link react-native-video
(1) ios:
如果您想允许其他应用在您的视频组件上播放音乐,请添加:
AppDelegate.m
#import <AVFoundation/AVFoundation.h> // 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: 'http://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:+"
...
}