react-native-video 是一个播放视频的开源组件,
它的用法很简单。
1.安装
依次执行下面两个命令,
npm i -S react-native-video
react-native link (这一步是连接本地视频库)
(1) ios:
如果您想允许其他应用在您的视频组件上播放音乐,请添加:
AppDelegate.m
#import <AVFoundation/AVFoundation.h> // import
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow
...
}
如果link失败的话需要执行下面的操作:
android/ settings.gradle
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
build.gradle
dependencies {
...
compile project(':react-native-video')
}
MainApplication.java
导入:
import com.brentvatne.react.ReactVideoPackage ;
将ReactVideoPackage
类添加到导出的包列表中。
@Override
protected List < ReactPackage > getPackages(){
return Arrays 。asList(
new MainReactPackage(),
new ReactVideoPackage() //添加这个
);
}
2.导入组件
import Video from 'react-native-video';
3.使用:
<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的值,以此来控制视频的播放和暂停。
source={require('这里放视频的路径,使用方法跟图片的一样,也可以用网络上的视频地址')}
还有一些常用方法:
volume = { 1.0 } // 0静音,1是正常的。
muted = { false } //完全静音。 paused = { false } //完全暂停播放。 resizeMode = “ cover ” //以纵横比填充整个屏幕。* repeat = { true } //永远重复。 playInBackground = { false } //当应用程序输入背景音频时,音频继续播放。 playWhenInactive = { false } // [iOS]当显示控制或通知中心时,视频继续播放。 ignoreSilentSwitch = { “ ignore ” } // [iOS] ignore | 服从 - 当'忽略'时,音频仍然会播放与iOS硬静音开关设置为静音。当“服从”时,音频将切换开关。当未指定时,将照常继承音频设置。 progressUpdateInterval = { 250.0 } // [iOS] Interval to fire onProgress(默认为 〜250ms ) onLoadStart = { this。loadStart } //视频开始加载时的回调 onLoad = { this。setDuration } //视频加载时的回调 onProgress = { this。时刻设定 } //回调每250毫秒〜与currentTime的 onEnd = { 此。onEnd } //播放完成时的回调 onError = { this。videoError } //当视频无法加载时,在 CallBuffer = { this。onBuffer } //当远程视频正在缓冲时,回调 onTimedMetadata = { this。onTimedMetadata } //当流接收到一些元数据
//在你的渲染功能,假设你有一个名为
// “background.mp4”在您的扩展文件。只需添加主要和(如果适用)补丁版本
< Video source = {{uri: “ background ”,mainVer: 1,patchVer: 0 }} //在给定的扩展版本中查找.mp4文件(background.mp4)。
rate = { 1.0 } // 0暂停,1是正常的。
volume = { 1.0 } // 0静音,1是正常的。
muted = { false } //完全静音。
paused = { false } //完全暂停播放。
resizeMode = “ cover ” //以纵横比填充整个屏幕。
repeat = { true } //永远重复。
onLoadStart = { this。loadStart } //视频开始加载时的回调
onLoad = { this。setDuration } //视频加载时的回调
onProgress = { this。时刻设定 } //回调每250毫秒〜与currentTime的
onEnd = {此。onEnd } //播放完成时的回调
onError = { this。videoError } //视频无法加载时回调
style = { styles。backgroundVideo } / >
要使音频在iOS背景下播放,需要将音频会话设置为AVAudioSessionCategoryPlayback
属性和方法都在上面注释的很清楚了