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

祁博雅
2023-12-01

 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


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


 类似资料: