附上原github地址：react-native-video

簡介

一個react-native視頻播放組件，可以實現(xiàn)視頻播放的效果。
要求react-native版本 >= 0.40.0；對于RN支持0.19.0 - 0.39.0，請使用1.0之前的版本。

最新版本(3.0.0)改動

3.0版對現(xiàn)有行為進行了許多更改。 請參閱#更新

目錄

• 安裝
• 使用
• 更新

一、安裝

使用npm安裝依賴庫：

npm install --save react-native-video

或者用yarn：

yarn add react-native-video

IOS環(huán)境下：

直接運行下面命令來鏈接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環(huán)境下：

直接運行下面命令來鏈接react-native-video庫。

react-native link 

如果上面的方式失敗了，那么你可以嘗試手動添加配置，這步比較麻煩。

android/settings.gradle
較新的ExoPlayer庫適用于大多數(shù)人。(推薦使用這個庫)

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

如果您需要使用舊的基于Android MediaPlayer的播放器，請改用以下內(nèi)容：

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

二、使用

//在渲染函數(shù)中，假設(shè)你的項目中有一個名為“background.mp4”的文件。 
//如果你愿意，可以在一個屏幕上添加多個視頻。
<Video source={{uri: "background"}}   // 可以是一個 URL 或者 本地文件
       ref={(ref) => {
         this.player = ref
       }}                                      
       onBuffer={this.onBuffer}                // 遠程視頻緩沖時的回調(diào)
       onEnd={this.onEnd}                      // 播放完成后的回調(diào)
       onError={this.videoError}               // 播放失敗后的回調(diào)
       onFullscreenPlayerWillPresent={this.fullScreenPlayerWillPresent} // 全屏啟動前的回調(diào)
       onFullscreenPlayerDidPresent={this.fullScreenPlayerDidPresent}   // 全屏啟動后的回調(diào)
       onFullscreenPlayerWillDismiss={this.fullScreenPlayerWillDismiss} // 全屏停止前的回調(diào)
       onFullscreenPlayerDidDismiss={this.fullScreenPlayerDidDismiss}  // 全屏停止后的回調(diào)
       style={styles.backgroundVideo} />

// 稍后觸發(fā)全屏
this.player.presentFullscreenPlayer()

// 禁止全屏
this.player.dismissFullscreenPlayer()

// 設(shè)置視頻播放的位置（從0秒開始）
this.player.seek(0)

// 設(shè)置組件樣式
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

可配置屬性

• allowsExternalPlayback
• audioOnly
• ignoreSilentSwitch
• muted
• paused
• playInBackground
• playWhenInactive
• poster
• posterResizeMode
• progressUpdateInterval
• rate
• repeat
• resizeMode
• selectedTextTrack
• stereoPan
• textTracks
• useTextureView
• volume

事件屬性

• onLoad
• onLoadStart
• onProgress
• onTimedMetadata

方法

• seek

1、可配置參數(shù)

allowsExternalPlayback
指示播放器是否允許切換到AirPlay或HDMI等外部播放模式。

• true(默認) - 運行切換到其他外部播放模式
• false - 不允許切換到其他外部播放模式
  適用平臺：IOS

audioOnly
指示播放器是否應僅播放音軌而不是顯示視頻軌道，而是顯示視頻poster(海報)。

• false(默認) - 僅正常播放視頻
• true - 展示海報和播放視頻
  如果audioOnly設(shè)置為true，那么poster屬性必須有值設(shè)置進去。
  適用平臺：IOS、Android通用

ignoreSilentSwitch
控制iOS靜默開關(guān)行為。

• "inherit"(默認) - 使用默認的AVPlayer開關(guān)行為
• "ignore" - 即使設(shè)置了靜音開關(guān)，也要播放音頻
• "obey" - 如果設(shè)置了靜音開關(guān)，請勿播放音頻
  適用平臺：IOS

muted
控制音頻是否靜音。

• false(默認) - 不要靜音
• true - 靜音
  適用平臺：IOS、Android通用

paused
控制播放器是否暫停。

• false(默認) - 暫停播放
• true - 不要暫停播放
  適用平臺：IOS、Android通用

playInBackground
確定應用程序在后臺時是否應繼續(xù)播放媒體。 這允許客戶繼續(xù)收聽音頻。

• false (默認) - 不繼續(xù)播放視頻
• true - 后臺繼續(xù)播放視頻

注意：要在IOS適用此功能，你還必須：

• Enable Background Audio 在你的Xcode項目中
• 將ignoreSilentSwitch 屬性值prop設(shè)置為"ignore"
  適用平臺：iOS、Android ExoPlayer、 Android MediaPlayer

playWhenInactive
在通知或控制中心位于視頻前面時是否應繼續(xù)播放媒體。

• false(默認) - 不繼續(xù)播放視頻
• true - 繼續(xù)播放視頻
  適用平臺：IOS

poster
加載視頻時要顯示的圖像值：帶有海報URL的字符串，例如“https://baconmockup.com/300/200/”。
適用平臺：IOS、Android

posterResizeMode
確定當幀與原始視頻尺寸不匹配時如何調(diào)整海報圖像的大小。

• "contain"(默認) - 均勻縮放圖像（保持圖像的縱橫比），使圖像的尺寸（寬度和高度）等于或小于視圖的相應尺寸（減去填充）
• "center" - 使圖像沿兩個維度居中。 如果圖像大于視圖，請將其均勻縮小以使其包含在視圖中
• "cover" - 均勻縮放圖像（保持圖像的縱橫比），使圖像的尺寸（寬度和高度）等于或大于視圖的相應尺寸（減去填充）
• "none" - 不調(diào)整大小
• "repeat" - 重復圖像以覆蓋視圖的框架。 圖像將保持其大小和縱橫比 （僅限iOS）
• "stretch" - 獨立縮放寬度和高度，這可能會改變src的寬高比
  適用平臺：IOS、Android

progressUpdateInterval
onProgress事件之間的毫秒延遲（以毫秒為單位）。
默認: 250.0
適用平臺：IOS、Android

rate
視頻播放的速率。

• 0.0 - 暫停播放
• 1.0 - 正常速率播放
• 其他值 - 自定義速率，例如0.5慢速播放或者2.0快速播放
  適用平臺：IOS、Android

注意：對于Android的播放器，rate屬性僅在Android6.0或者更高版本中生效。

repeat
確定在到達結(jié)尾時是否重復播放視頻。

• flase(默認) - 不重復播放
• true - 重復播放
  適用平臺：IOS、Android

resizeMode
確定當幀與原始視頻尺寸不匹配時如何調(diào)整視頻大小。

• "none"(默認) - 不匹配大小
• "contain" - 均勻縮放視頻（保持視頻的寬高比），使視頻的尺寸（寬度和高度）等于或小于視圖的相應尺寸（減去填充）
• "cover" - 均勻縮放視頻（保持視頻的寬高比），使圖像的尺寸（寬度和高度）等于或大于視圖的相應尺寸（減去填充）
• "stretch" - 獨立縮放寬度和高度，這可能會改變src的寬高比
  適用平臺：IOS、 Android ExoPlayer、Android MediaPlayer

selectedTextTrack
配置顯示哪個文本軌道（標題或副標題）（如果有）。

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

例子：

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

iOS和Android（僅限4.4及更高版本）均提供設(shè)置，以便為聽障人士提供字幕。 如果選擇“系統(tǒng)”并啟用了字幕設(shè)置，iOS / Android將查找與該客戶的語言匹配的標題并顯示它。
如果匹配指定類型（和值，如果適用）的軌道不可用，則不會顯示任何文本軌道。 如果多個曲目符合條件，則將使用第一個匹配。
適用平臺：Android ExoPlayer，IOS

stereoPan
調(diào)整左右音頻通道的平衡。 接受-1.0和1.0之間的任何值。

• -1.0 - 滿左音頻
• 0.0(默認) - 居中
• 1.0 - 滿右音頻
  適用平臺：Android MediaPlayer

textTracks
加載一個或多個“sidecar”文本軌道。 這需要一組表示每個軌道的對象。 每個對象應具有以下格式：

例子：

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播放列表的一部分加載。
適用平臺：Android ExoPlayer

useTextureView
輸出到TextureView而不是默認的SurfaceView。 通常，您需要使用SurfaceView，因為它更高效并提供更好的性能。 但是，SurfaceViews有兩個限制：

• 它無法使用動畫，轉(zhuǎn)換或縮放
• 你無法覆蓋多個SurfaceView
  useTextureView只能在設(shè)置源的同時進行設(shè)置。
• false(默認) - 使用SurfaceView
• true - 使用TextureView
  適用平臺：Android ExoPlayer

volume
調(diào)整音量

• 1.0 - 滿音量
• 0.0 - 將音頻靜音
• 其他值 - 減小音量
  適用平臺：IOS、Android

2、事件參數(shù)

onLoad
加載媒體并準備播放時調(diào)用的回調(diào)函數(shù)。
Payload（有效負載）：

例子：

{ 
 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' }
 ]
}

適用平臺：IOS、Android

onLoadStart
媒體開始加載時調(diào)用的回調(diào)函數(shù)。
Payload（有效負載）：

例子：

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

適用平臺：IOS、Android

onProgress
視頻播放過程中每個間隔進度單位（通常不足一秒，你可以打印日志測試下）調(diào)用的回調(diào)，其中包含有關(guān)媒體當前正在播放的位置的信息。

例子：

{
  currentTime: 5.2,
  playableDuration: 34.6,
  seekableDuration: 888
}

onTimedMetadata
當定時元數(shù)據(jù)可用時調(diào)用的回調(diào)函數(shù).

例子：

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

適用平臺：IOS、Android ExoPlayer

3、方法

方法對引用Video元素的ref引用進行操作。 你可以使用以下代碼創(chuàng)建引用：

return (
  <Video source={...}
    ref => (this.player = ref) />
);

seek(seconds)
seek(這里翻譯成定位)到由秒表示的指定位置。 seconds是一個浮點值。
注意：seek()只能在onLoad事件觸發(fā)后調(diào)用。
例子：

this.player.seek(200); // 將開始播放時間定為3min20s處

適用平臺：IOS、Android

seek(seconds, tolerance) - 精確的seek
默認情況下，iOS在目標位置的100毫秒內(nèi)尋找。 如果您需要更高的準確度，可以使用搜索公差方法：

seek(seconds, tolerance) 

tolerance是允許的秒位置的最大距離（以毫秒為單位）。 使用更精確的公差可能導致尋求更長時間。 如果要精確搜索，請將容差設(shè)置為0。
例子：

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

適用平臺：IOS

三、更新

Veriosn 3.0

所有平臺現(xiàn)在都可以自動播放

以前，在Android ExoPlayer上，如果未設(shè)置暫停的道具，則媒體不會自動開始播放。唯一可行的方法是設(shè)置paused = {false}。如果未設(shè)置暫停，則已更改為自動播放，以便跨平臺的行為保持一致。

從后臺返回時，所有平臺現(xiàn)在都保持暫停狀態(tài)

以前，在Android MediaPlayer上，如果您在應用程序進入后臺并設(shè)置暫停的道具時設(shè)置了AppState事件，那么當您返回應用程序時視頻將暫停，它將被忽略。

請注意，Windows沒有應用程序進入后臺的概念，因此這不適用于此。

默認情況下使用Android SDK 27

版本3.0將Android構(gòu)建工具和SDK更新為版本27. React Native正在切換到SDK 27，以準備Google要求新的Android應用程序在2018年8月之前使用SDK 26。

您將需要安裝版本27 SDK和版本27.0.3 buildtools或修改build.gradle文件以配置react-native-video以使用與應用程序其余部分相同的構(gòu)建設(shè)置，如下所述。

使用應用build設(shè)置

您需要在頂級build.gradle文件（而不是app / build.gradle）中創(chuàng)建project.ext部分。使用app / build.gradle文件中的值填寫下面示例中的值。

//頂級build文件，您可以在其中添加所有子項目/模塊共有的配置選項。

buildscript {
    ... //各種其他設(shè)置都在這里
}

allprojects {
    ... //各種其他設(shè)置都在這里

    project.ext {
        compileSdkVersion = 23
        buildToolsVersion =“23.0.1”

        minSdkVersion = 16
        targetSdkVersion = 22
    }
}

如果遇到Could not find com.android.support:support-annotations:27.0.0.。重新安裝Android支持存儲庫。

這里提供一個出現(xiàn)上述 "Could not find com.android.support:support-annotations:27.0.0."錯誤時的解決方法。

這是從gituhb的issue上找到的：
只需在項目的android / build.gradle中指定Google的maven存儲庫：

allprojects {
    repositories {
        maven { url 'https://maven.google.com' }
    }
}

這是因為Android原生庫依賴于最新版本的Android支持注釋庫，該庫歷史上是通過SDK管理器安裝的，但現(xiàn)在只能從https://maven.google.com獲取。