diff --git a/API.md b/API.md new file mode 100644 index 00000000..ba9ed02d --- /dev/null +++ b/API.md @@ -0,0 +1,1541 @@ +## Table of Contents + +* [Installation](#installation) + * [iOS](#ios-installation) + * [tvOS](#tvos-installation) + * [Android](#android-installation) + * [Windows](#windows-installation) + * [react-native-dom](#react-native-dom-installation) +* [Examples](#examples) + * [iOS](#ios-example) + * [Android](#android-example) + * [Windows](#windows-example) +* [Usage](#usage) +* [iOS App Transport Security](#ios-app-transport-security) +* [Audio Mixing](#audio-mixing) +* [Android Expansion File Usage](#android-expansion-file-usage) +* [Updating](#updating) + +## Installation + +Using npm: + +```shell +npm install --save react-native-video +``` + +or using yarn: + +```shell +yarn add react-native-video +``` + +Then follow the instructions for your platform to link react-native-video into your project: + +### iOS installation +
+ iOS details + +#### Standard Method + +**React Native 0.60 and above** + +Run `npx pod-install`. Linking is not required in React Native 0.60 and above. + +**React Native 0.59 and below** + +Run `react-native link react-native-video` to link the react-native-video library. + +#### Enable Static Linking for dependencies in your ios project Podfile + +Add `use_frameworks! :linkage => :static` just under `platform :ios` in your ios project Podfile. + +[See the example ios project for reference](examples/basic/ios/Podfile#L5) + +#### Using CocoaPods (required to enable caching) + +Setup your Podfile like it is described in the [react-native documentation](https://facebook.github.io/react-native/docs/integration-with-existing-apps#configuring-cocoapods-dependencies). + +Depending on your requirements you have to choose between the two possible subpodspecs: + +Video only: + +```diff + pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' ++ `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'` +end +``` + +Video with caching ([more info](docs/caching.md)): + +```diff + pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' ++ `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'` +end +``` + +
+ +### tvOS installation +
+ tvOS details + +`react-native link react-native-video` doesn’t work properly with the tvOS target so we need to add the library manually. + +First select your project in Xcode. + + + +After that, select the tvOS target of your application and select « General » tab + + + +Scroll to « Linked Frameworks and Libraries » and tap on the + button + + + +Select RCTVideo-tvOS + + +
+ +### Android installation +
+ Android details + +Linking is not required in React Native 0.60 and above. +If your project is using React Native < 0.60, run `react-native link react-native-video` to link the react-native-video library. + +Or if you have trouble, make the following additions to the given files manually: + +#### **android/settings.gradle** + +The newer ExoPlayer library will work for most people. + +```gradle +include ':react-native-video' +project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer') +``` + +If you need to use the old Android MediaPlayer based player, use the following instead: + +```gradle +include ':react-native-video' +project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') +``` + +#### **android/app/build.gradle** + +From version >= 5.0.0, you have to apply these changes: + +```diff +dependencies { + ... + compile project(':react-native-video') ++ implementation "androidx.appcompat:appcompat:1.0.0" +- implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" + +} +``` + +#### **android/gradle.properties** + +Migrating to AndroidX (needs version >= 5.0.0): + +```gradle.properties +android.useAndroidX=true +android.enableJetifier=true +``` + +#### **MainApplication.java** + +If using com.facebook.react.PackageList to auto import native dependencies, there are no updates required here. Please see the android example project for more details. +/examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java + +##### For manual linking + +On top, where imports are: + +```java +import com.brentvatne.react.ReactVideoPackage; +``` + +Add the `ReactVideoPackage` class to your list of exported packages. + +```java +@Override +protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new ReactVideoPackage() + ); +} +``` +
+ +### Windows installation +
+ Windows RNW C++/WinRT details + +#### Autolinking + +**React Native Windows 0.63 and above** + +Autolinking should automatically add react-native-video to your app. + +#### Manual Linking + +**React Native Windows 0.62** + +Make the following additions to the given files manually: + +##### **windows\myapp.sln** + +Add the _ReactNativeVideoCPP_ project to your solution (eg. `windows\myapp.sln`): + +1. Open your solution in Visual Studio 2019 +2. Right-click Solution icon in Solution Explorer > Add > Existing Project... +3. Select `node_modules\react-native-video\windows\ReactNativeVideoCPP\ReactNativeVideoCPP.vcxproj` + +##### **windows\myapp\myapp.vcxproj** + +Add a reference to _ReactNativeVideoCPP_ to your main application project (eg. `windows\myapp\myapp.vcxproj`): + +1. Open your solution in Visual Studio 2019 +2. Right-click main application project > Add > Reference... +3. Check _ReactNativeVideoCPP_ from Solution Projects + +##### **pch.h** + +Add `#include "winrt/ReactNativeVideoCPP.h"`. + +##### **app.cpp** + +Add `PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider());` before `InitializeComponent();`. + +**React Native Windows 0.61 and below** + +Follow the manual linking instuctions for React Native Windows 0.62 above, but substitute _ReactNativeVideoCPP61_ for _ReactNativeVideoCPP_. + +
+ +### react-native-dom installation +
+ react-native-dom details + +Make the following additions to the given files manually: + +#### **dom/bootstrap.js** + +Import RCTVideoManager and add it to the list of nativeModules: + +```javascript +import { RNDomInstance } from "react-native-dom"; +import { name as appName } from "../app.json"; +import RCTVideoManager from 'react-native-video/dom/RCTVideoManager'; // Add this + +// Path to RN Bundle Entrypoint ================================================ +const rnBundlePath = "./entry.bundle?platform=dom&dev=true"; + +// React Native DOM Runtime Options ============================================= +const ReactNativeDomOptions = { + enableHotReload: false, + nativeModules: [RCTVideoManager] // Add this +}; +``` +
+ +## Examples + +Run `yarn xbasic install` before running any of the examples. + +### iOS Example +``` +yarn xbasic ios +``` + +### Android Example +``` +yarn xbasic android +``` + +### Windows Example +``` +yarn xbasic windows +``` + +## Usage + +```javascript +// Load the module + +import Video from 'react-native-video'; + +// Within your render function, assuming you have a file called +// "background.mp4" in your project. You can include multiple videos +// on a single screen if you like. + +