react-native-video使用攻略

---

源码在此 仅供参考

---

一、简介

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，#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()
    );
}

三、案例分析

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

此外，我们还给这个视频播放器组件添加了很多事件属性，例如播放进度条的监听(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就已经做好了，当然我们也可以自己定制喜欢的样式和布局，例如下面这种：

实现上图的源码在这