react-native-video

作者: 雪脩 | 来源:发表于2018-09-19 11:31 被阅读72次

简介

一个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 <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()
    );
}

二、使用

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(
    <Video source={···}
        ref => (this.player = ref) />

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毫秒处

网友评论

本文标题：react-native-video

本文链接：https://www.haomeiwen.com/subject/btmhbftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

react-native-video

简介

一、安装

IOS环境下：

Android环境下：

二、使用

1、可配置属性

2、事件属性

4、方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react native

React-Native相关