Olivier Bouillet 4c63988d12

* fix(ts): onPlaybackRateChangeData was not correctly typed

* fix: ensure tracks are well displayed in the sample

* chore: reorder drm props

* chore: reorder events

* docs: move onAudioTracks to events

* docs: reorder and clean <PlatformsList from methods

* docs: fix props case naming

* docs: fix ordering

* docs: fix ordering & remove trackId

* chore: remove sample build from installation page

* docs: remove outdated information

* docs: remove beta information from doc landing page

2024-05-04 14:36:39 +02:00

4.3 KiB

Raw Blame History

Installation

Using npm:

npm install --save react-native-video

or using yarn:

yarn add react-native-video

Then follow the instructions for your platform to link react-native-video into your project

Specific platform installation

iOS

Standard Method

Run pod install in the ios directory of your project.

Enable custom feature in podfile file

Samples available in sample app see sample pod file

Video caching

To enable Video caching usage, add following line in your podfile: (more info here)

# enable Video caching
+ $RNVideoUseVideoCaching=true

Google IMA

Google IMA is the google SDK to support Client Side Ads Integration (CSAI), see google documentation for more information.

To enable google IMA usage define add following line in your podfile:

$RNVideoUseGoogleIMA=true

Android

From version >= 6.0.0, your application needs to have kotlin version >= 1.7.0

buildscript {
    ...
    ext.kotlinVersion = '1.7.0'
    ...
}

Enable custom feature in gradle file

You can disable or enable the following features by setting the following variables in your android/build.gradle file:

useExoplayerIMA - Enable Google IMA SDK (Ads support)
useExoplayerRtsp - Enable RTSP support
useExoplayerSmoothStreaming - Enable SmoothStreaming support
useExoplayerDash - Enable Dash support
useExoplayerHls - Enable HLS support

Each of these features enabled will increase the size of your APK, so only enable the features you need. By default enabled features are: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHls

Example:

buildscript {
  ext {
    ...
    useExoplayerIMA = true
    useExoplayerRtsp = true
    useExoplayerSmoothStreaming = true
    useExoplayerDash = true
    useExoplayerHls = true
    ...
  }
}

See sample app

Windows

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):

Open your solution in Visual Studio 2019
Right-click Solution icon in Solution Explorer > Add > Existing Project...
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):

Open your solution in Visual Studio 2019
Right-click main application project > Add > Reference...
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 instructions for React Native Windows 0.62 above, but substitute ReactNativeVideoCPP61 for ReactNativeVideoCPP.

tvOS

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

visionOS

Run pod install in the visionos directory of your project

4.3 KiB Raw Blame History Unescape Escape