react-native-video

简介

一个react-native视频组件，可以实现视频播放的效果。
要求的react-native版本 >= 0.40.0;对于RN支持0.19.0-0.39.0，请使用1.0之前的版本。

一、安装

使用npm安装依赖库：
npm install --save react-native-video
或者yarn：
yarn add react-native-video

IOS环境下：

直接运行下面命令来链接react-native-video库:
react-native link
如果你想允许其他应用在你的视频组件上播放音乐，请打开AppDelegate.m文件并且添加：
AppDelegate.m

#import   // 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 getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactVideoPackage()
    );
}

二、使用

1、可配置属性

• muted（iOS 、Android）
  控制音频是否静音。
  false(默认) - 不要静音
true - 静音

---

• volume （iOS、Android）
  调整音量
  1.0 - 满音量
0.0 - 将音频静音
其他值 - 减小音量

---

• rate
  视频播放的速率。
  0.0 - 暂停播放
1.0 - 正常速率播放
其他值 - 自定义速率，例如0.5慢速播放或者2.0快速播放
  注意：对于Android的播放器，rate属性仅在Android6.0或者更高版本中生效。

---

• paused (iOS 、Android)
  控制播放器是否暂停。
  false(默认) - 暂停播放
true - 不要暂停播放

---

repeat （iOS、Android）
确定在到达结尾时是否重复播放视频。
flase(默认) - 不重复播放
true - 重复播放

---

• allowsExternalPlayback（iOS）
  指示播放器是否允许切换到AirPlay或HDMI等外部播放模式。
  true(默认)-运行切换到其他外部播放模式
false-不允许切换到其他外部播放模式

---

• audioOnly（iOS 、 Android）
  指示播放器是否应仅播放音轨而不是显示视频轨道，而是显示视频poster(海报)。
  false(默认) - 仅正常播放视频
true - 展示海报和播放视频
  如果audioOnly设置为true，那么poster属性必须有值设置进去。

---

• ignoreSilentSwitch（iOS）
  控制iOS静默开关行为。
  inherit(默认) - 使用默认的AVPlayer开关行为
ignore - 设置了静音开关，也要播放音频
obey - 如果设置了静音开关，请勿播放音频

---

• playInBackground（iOS、Android ExoPlayer、 Android MediaPlayer）
  确定应用程序在后台是是否应继续播放媒体。这允许客户继续收听音频。
  false (默认) - 不继续播放视频
true - 后台继续播放视频

注意：要在IOS适用此功能，你还必须:

• Enable Background Audio 在你的Xcode项目中
• 将ignoreSilentSwitch 属性值prop设置为”ignore”

---

playWhenInactive （iOS）
在通知或控制中心位于视频前面时是否应继续播放媒体。
false(默认) - 不继续播放视频
true - 继续播放视频

---

• poster（iOS、Android）
  加载视频时要显示的图像值：带有海报URL的字符串，例如“https://baconmockup.com/300/200/”。

---

posterResizeMode（iOS、Android）
确定当帧与原始视频尺寸不匹配时如何调整海报图像的大小。
contain(默认) - 均匀缩放图像（保持图像的纵横比），使图像的尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）。
center - 使图像沿两个维度居中。 如果图像大于视图，请将其均匀缩小以使其包含在视图中
cover - 均匀缩放图像（保持图像的纵横比），使图像的尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）
none - 不调整大小
repeat - 重复图像以覆盖视图的框架。 图像将保持其大小和纵横比 （仅限iOS）
stretch - 独立缩放宽度和高度，这可能会改变src的宽高比

---

resizeMode（IOS、 Android ExoPlayer、Android MediaPlayer）
确定当帧与原始视频尺寸不匹配时如何调整视频大小。
none(默认) - 不匹配大小
contain - 均匀缩放视频（保持视频的宽高比），使视频的尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）
cover - 均匀缩放视频（保持视频的宽高比），使图像的尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）
stretch - 独立缩放宽度和高度，这可能会改变src的宽高比

---

• progressUpdateInterval（iOS、Android）
  onProgress事件之间的毫秒延迟（以毫秒为单位）。
  默认: 250.0

---

• stereoPan（iOS、Android）
  调整左右音频通道的平衡。 接受-1.0和1.0之间的任何值。
  -1.0 - 满左音频
0.0(默认) - 居中
1.0 - 满右音频

---

• textTracks （Android ExoPlayer）
  加载一个或多个“sidecar”文本轨道。 这需要一组表示每个轨道的对象。 每个对象应具有以下格式：

Property	Description
title	文本轨道的名称
language	代表语言的2个字母ISO 639-1代码
type	Mime类型的轨道 ：TextTrackType.SRT - .srt SubRip Subtitle、TextTrackType.TTML - .ttml TTML、TextTrackType.VTT - .vtt WebVTT(这个也一般用不到)
uri	文本轨道的URL。目前，仅支持在网络服务器上托管的种类

例子：

import { TextTrackType }, Video from 'react-native-video';

textTracks={[
  {
    title: "English CC",
    language: "en",
    type: "text/vtt", TextTrackType.VTT,
    uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
  },
  {
    title: "Spanish Subtitles",
    language: "es",
    type: "application/x-subrip", TextTrackType.SRT,
    uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
  }
]}

这不支持iOS，因为AVPlayer不支持它。 必须将文本轨道作为HLS播放列表的一部分加载。

---

• selectedTextTrack
  配置显示那个文本轨道(标题或副标题)（如果有）

Type	Value	Description
system(默认)	N/A	仅在启用了字幕的系统首选项时显示标题
disable	N/A	不显示文本轨道
title	string	显示标题为值的文本轨道，例如 “法国1”
“language”	string	显示指定为值的语言显示文本轨道，例如“FR”
“index”	number	显示指定为值的索引的文本轨道，例如0

iOS和Android（仅限4.4及更高版本）均提供设置，以便为听障人士提供字幕。 如果选择“系统”并启用了字幕设置，iOS / Android将查找与该客户的语言匹配的标题并显示它。
如果匹配指定类型（和值，如果适用）的轨道不可用，则不会显示任何文本轨道。 如果多个曲目符合条件，则将使用第一个匹配。

selectedTextTrack={{
   type: Type,
   value: Value
}}

例子：

selectedTextTrack={{
  type: "title",
  value: "English Subtitles"
}}

---

• useTextureView
  输出到TextureView而不是默认的SurfaceView。 通常，您需要使用SurfaceView，因为它更高效并提供更好的性能。 但是，SurfaceViews有两个限制：
  它无法使用动画，转换或缩放
  你无法覆盖多个SurfaceView

useTextureView只能在设置源的同时进行设置。
false(默认) - 使用SurfaceView
true - 使用TextureView

2、事件属性

• onLoad（iOS、Android）
  加载媒体并准备播放时调用的回调函数。
  Payload（有效负载）：

Property	Value	Desctiption
currentPosition	number	视频开始播放的时间（以秒为单位）
duration	number	视频时间长度（以秒为单位）
natural	object	属性：width - 视频编码的宽度（以像素为单位）；height - 视频编码的高度（以像素为单位）；orientation - “portrait”或者”landscape”
textTracks	array	一组文本跟踪信息对象，具有以下属性：index，title，language，type

 {
  canPlaySlowForward: true,     //可以慢速播放
  canPlayReverse: false,        //可以反向播放
  canPlaySlowReverse: false,    //可以慢速反向播放
  canPlayFastForward: false,    //可以快进播放
  canStepForward: false,        //可以前进
  canStepBackward: false,       //可以后退
  currentTime: 0,
  duration: 5910.208984375,
  naturalSize: {
     height: 1080
     orientation: 'landscape'
     width: '1920'
  },
  textTracks: [
    { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },
    { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },
    { title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' }
  ]
}

• onLoadStart（iOS、Android）
  媒体开始加载时调用的回调函数
  Payload（有效负载）：

Property	Description
isNetwork	boolean
type	string
uri	string

{
  isNetwork: true,
  type: '',
  uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
}

---

• onProgress
  视频播放过程中每个间隔进度单位（通常不足一秒，你可以打印日志测试下）调用的回调，其中包含有关媒体当前正在播放的位置的信息。

Property	Description
currentTime	number
playableDuration	number
seekableDuration	number

{
  currentTime: 5.2,
  playableDuration: 34.6,   //可玩的持续时间
  seekableDuration: 888    //可寻找的持续时间
}

• onTimedMetadata（iOS、Android ExoPlayer）
  当定时元数据可用时调用的回调函数.

Property	Type	Description
metadata	array	Array of metadata objects

例子

{
  metadata: [
    { value: 'Streaming Encoder', identifier: 'TRSN' },
    { value: 'Internet Stream', identifier: 'TRSO' },
    { value: 'Any Time You Like', identifier: 'TIT2' }
  ]
}

4、方法

方法对引用Video元素的ref引用进行操作。你可以使用以下代码创建应用：

return(
    

• seek(seconds)（iOS、Android）
  seek(这里翻译成定位)到由秒表示的位置。seconds是一个浮点值。
  注意：seel()只能在onLoad事件触发后调用。
  例子：

this.player.seek(200)  //将开始播放时间定为3min20
s处

---

• seek(seconds, tolerance) - 精确的seek（iOS）
  默认情况下，iOS在目标位置的100毫秒内寻找。 如果您需要更高的准确度，可以使用搜索公差方法：

seek(seconds, tolerance)

tolerance是允许的秒位置的最大距离（以毫秒为单位）。 使用更精确的公差可能导致寻求更长时间。 如果要精确搜索，请将容差设置为0。
例子：

this.player.seek(120, 50); // 定位到2分钟精度 +/- 50毫秒处