react-native-video使用攻略

我不是女神ヾ 2022-03-15 12:26 1034阅读 0赞

[源码在此][Link 1] 仅供参考

--------------------

# 一、简介 #

react-native-video是一个可以播放视频的组件，它的用法简单，功能完备，是React native项目中很好用的一个Video播放的组件。

它的功能主要有以下10个：

1.  控制播放速率
2.  控制音量大小
3.  支持静音功能
4.  支持播放和暂停
5.  支持后台音频播放
6.  支持定制样式，比如设置宽高
7.  丰富的事件调用，如onLoad，onEnd，onProgress，onBuffer等等，可以通过对应的事件进行UI上的定制处理，如onBuffer时我们可以显示一个进度条提示用户视频正在缓冲。
8.  支持全屏播放，使用presentFullscreenPlayer方法。这个方法在iOS上可行，在android上不起作用。参看[issue\#534][issue_534]，\#726也是同样的问题。
9.  支持跳转进度，使用seek方法跳转到指定的地方进行播放
10. 可以加载远程视频地址进行播放，也可以加载RN本地存放的视频。

# 二、使用 #

使用步骤如下：

1.  导入依赖库

在项目Terminal中输入命令行：

npm install react-native-video --save

或者用yarn：

yarn add react-native-video

IOS环境下：

直接运行下面命令来链接react-native-video库。

react-native link

如果你想允许其他应用在你的视频组件上播放音乐，请打开AppDelegate.m文件并且添加：

AppDelegate.m

#import <AVFoundation/AVFoundation.h>  // import
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      ...
      [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
      ...
    }

Android环境下：

直接运行下面命令来链接react-native-video库。

react-native link

如果上面的方式失败了，那么你可以尝试手动添加配置，这步比较麻烦。

android/settings.gradle  
较新的ExoPlayer库适用于大多数人。(推荐使用这个库)

include ':react-native-video'
    project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

如果您需要使用旧的基于Android MediaPlayer的播放器，请改用以下内容：

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  
在java文件顶部位置记得添加import：

import com.brentvatne.react.ReactVideoPackage;

将ReactVideoPackage类添加到导出的包列表中:

@Override
    protected List<ReactPackage> getPackages() {
        return Arrays.asList(
                new MainReactPackage(),
                new ReactVideoPackage()
        );
    }

# 三、案例分析 #

![Image 1][]

screen

上面这张动图可以看出，我们可以通过自定义的样式和功能来使用react-native-video。  
其中实现的功能有：调节播放速率，调节视频音量，以及调节视频播放器的样式，这三个功能分别对应下图中的三个红色边框离的选项。

![Image 1][]

screenshot

此外，我们还给这个视频播放器组件添加了很多事件属性，例如播放进度条的监听(onProgress)，播放完回到视频起点的设置(onEnd)等，下面我们跟随代码一步步分析这个组件的一些属性和用法。

*  首先我们声明一个组件来使用这个Video，在此之前先将它导进来

import React, {
        Component
    } from 'react';
    
    import {
        StyleSheet,
        Text,
        TouchableOpacity,
        View,
    } from 'react-native';
    
    import Video from 'react-native-video';
    
    export default class VideoPlayer extends Component {
          ···  ···
    }

*  接着初始化一些state，之后会用到。比如rate表示视频播放速率初始化为1，即正常速率。

state = {
            rate: 1,
            volume: 1,
            muted: false,
            resizeMode: 'contain',
            duration: 0.0,
            currentTime: 0.0,
            paused: true,
        };

*  渲染Video组件

<Video
        ref={(ref: Video) => { //方法对引用Video元素的ref引用进行操作
            this.video = ref
        }}
        /* source={
       { uri: 'https://gslb.miaopai.com/stream/HNkFfNMuhjRzDd-q6j9qycf54OaKqInVMu0YhQ__.mp4?ssig=bbabfd7684cae53660dc2d4c2103984e&time_stamp=1533631567740&cookie_id=&vend=1&os=3&partner=1&platform=2&cookie_id=&refer=miaopai&scid=HNkFfNMuhjRzDd-q6j9qycf54OaKqInVMu0YhQ__', type: 'mpd' }} */
        source={require('../../background.mp4')}//设置视频源  
        style={styles.fullScreen}//组件样式
        rate={this.state.rate}//播放速率
        paused={this.state.paused}//暂停
        volume={this.state.volume}//调节音量
        muted={this.state.muted}//控制音频是否静音
        resizeMode={this.state.resizeMode}//缩放模式
        onLoad={this.onLoad}//加载媒体并准备播放时调用的回调函数。
        onProgress={this.onProgress}//视频播放过程中每个间隔进度单位调用的回调函数
        onEnd={this.onEnd}//视频播放结束时的回调函数
        onAudioBecomingNoisy={this.onAudioBecomingNoisy}//音频变得嘈杂时的回调 - 应暂停视频
        onAudioFocusChanged={this.onAudioFocusChanged}//音频焦点丢失时的回调 - 如果焦点丢失则暂停
        repeat={false}//确定在到达结尾时是否重复播放视频。
    />

*ps:这里要注意!*  
*react-native-video通过source属性设置视频，播放远程视频时使用uri来设置视频地址，如下：*

source={
       {uri: "http://www.xxx.com/xxx/xxx/xxx.mp4"}}

*复制代码播放本地视频时，使用方式如下：*

source={require('../assets/video/turntable.mp4')}

*复制代码需要注意的是，source属性不能为空，uri或本地资源是必须要设置的，否则会导致app闪退。uri不能设置为空字符串，必须是一个具体的地址。*

*  关于进度条  
    在render中声明两个量：flexCompleted和flexRemaining，前者表示已经播放完成的进度，后者表示剩余的进度，，这两个量分别作为包裹在View中组件的flex属性的值：

render() {
            const flexCompleted = this.getCurrentTimePercentage() * 100;
            const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
            ...  ...
            <View style={styles.progress}>
                <View style={[styles.innerProgressCompleted, {flex: flexCompleted}]}/>
                <View style={[styles.innerProgressRemaining, {flex: flexRemaining}]}/>
            </View>
    }
    getCurrentTimePercentage() {
            if (this.state.currentTime > 0) {
                return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
            }
            return 0;
    };

*  点击事件的处理  
    通过点击组件中的选项，我们可以调节视频的音量、播放速率、缩放的样式等。  
    先把布局定义下：

<View style={styles.controls}>
        <View style={styles.generalControls}>
            <View style={styles.rateControl}>
                {this.renderRateControl(0.25)}
                {this.renderRateControl(0.5)}
                {this.renderRateControl(1.0)}
                {this.renderRateControl(1.5)}
                {this.renderRateControl(2.0)}
            </View>
    
            <View style={styles.volumeControl}>
                {this.renderVolumeControl(0.5)}
                {this.renderVolumeControl(1)}
                {this.renderVolumeControl(1.5)}
            </View>
    
            <View style={styles.resizeModeControl}>
                {this.renderResizeModeControl('cover')}
                {this.renderResizeModeControl('contain')}
                {this.renderResizeModeControl('stretch')}
            </View>
        </View>

需要重写三个方法来填充事件的内容：  
renderRateControl(rate)：设置播放速率，改方法接收一个值表示速率的大小，1.0表示正常速率播放。注意：对于Android的播放器，rate属性仅在Android6.0或者更高版本中生效。

renderRateControl(rate) {
            const isSelected = (this.state.rate === rate);
    
            return (
                <TouchableOpacity onPress={() => {
                    this.setState({rate})
                }}>
                    <Text style={[styles.controlOption, {fontWeight: isSelected ? 'bold' : 'normal'}]}>
                        {rate}x
                    </Text>
                </TouchableOpacity>
            );
        }

renderVolumeControl(volume)：该方法接收一个值作为音量大小，1.0为正常音量

renderVolumeControl(volume) {
            const isSelected = (this.state.volume === volume);
    
            return (
                <TouchableOpacity onPress={() => {
                    this.setState({volume})
                }}>
                    <Text style={[styles.controlOption, {fontWeight: isSelected ? 'bold' : 'normal'}]}>
                        {volume * 100}%
                    </Text>
                </TouchableOpacity>
            )
        }

renderResizeModeControl(resizeMode):该方法接收的参数resizeMode有四种模式：  
"none"(默认) - 不匹配大小  
"contain" - 均匀缩放视频（保持视频的宽高比），使视频的尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）  
"cover" - 均匀缩放视频（保持视频的宽高比），使图像的尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）  
"stretch" - 独立缩放宽度和高度，这可能会改变src的宽高比

renderResizeModeControl(resizeMode) {
            const isSelected = (this.state.resizeMode === resizeMode);
    
            return (
                <TouchableOpacity onPress={() => {
                    this.setState({resizeMode})
                }}>
                    <Text style={[styles.controlOption, {fontWeight: isSelected ? 'bold' : 'normal'}]}>
                        {resizeMode}
                    </Text>
                </TouchableOpacity>
            )
        }

*  最后，重新定义事件属性onLoad、onEnd、onProgress等

video: Video;
        onLoad = (data) => {
            this.setState({duration: data.duration});
        };
    
        onProgress = (data) => {
            this.setState({currentTime: data.currentTime});
        };
    
        onEnd = () => {
            this.setState({paused: true});
            this.video.seek(0)
        };
    
        onAudioBecomingNoisy = () => {
            this.setState({paused: true})
        };
    
        onAudioFocusChanged = (event: { hasAudioFocus: boolean }) => {
            this.setState({paused: !event.hasAudioFocus})
        };

注意一下onEnd的回调中用到了seek()方法，这个方法接收的参数的单位是秒，意味着seek(定位)到由秒表示的指定位置，seek(0)也就是定位到视频开始播放的位置。

# 附录 #

这样，一个可灵活使用的视频播放器Demo就已经做好了，当然我们也可以自己定制喜欢的样式和布局，例如下面这种：

![Image 1][]

screenshot2

[实现上图的源码在这][Link 2]  
  
作者：淮左明都  
链接：https://www.jianshu.com/p/80e095d9b9b9  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Link 1]: https://github.com/ok406lhq/DemoPro/tree/master/app/VideoDemo
[issue_534]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Freact-native-community%2Freact-native-video%2Fissues%2F534
[Image 1]: 
[Link 2]: https://github.com/ok406lhq/RTCoin/blob/61d656aa78c86f67e1b074371978769ce2072fbb/src/page/Task/VideoScreen.js