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

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 = { this。loadStart } //视频开始加载时的回调 
       onLoad = { this。setDuration }     //视频加载时的回调 
       onProgress = { this。时刻设定 }     //回调每250毫秒〜与currentTime的 
       onEnd = {此。onEnd }            //播放完成时的回调 
       onError = { this。videoError }     //视频无法加载时回调 
       style = { styles。backgroundVideo } / >

在iOS背景播放

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


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


标签：

相关文章