react-native播放视频组件 react-native-video的用法

时间:2022-08-12 18:59:29

 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
...
}
(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')

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
= { thisloadStart } //视频开始加载时的回调
onLoad
= { thissetDuration } //视频加载时的回调
onProgress
= { this时刻设定 } //回调每250毫秒〜与currentTime的
onEnd
= { onEnd } //播放完成时的回调
onError
= { thisvideoError } //当视频无法加载时,在
CallBuffer
= { thisonBuffer } //当远程视频正在缓冲时,回调
onTimedMetadata
= { thisonTimedMetadata } //当流接收到一些元数据

Android扩展文件使用

//在你的渲染功能,假设你有一个名为
// “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
= { thisloadStart } //视频开始加载时的回调
onLoad
= { thissetDuration } //视频加载时的回调
onProgress
= { this时刻设定 } //回调每250毫秒〜与currentTime的
onEnd
= {onEnd } //播放完成时的回调
onError
= { thisvideoError } //视频无法加载时回调
style
= { stylesbackgroundVideo } / >

在iOS背景播放

要使音频在iOS背景下播放,需要将音频会话设置为AVAudioSessionCategoryPlayback


属性和方法都在上面注释的很清楚了