Skip to main content

Alternative playback for FPS iOS

Requires Fairplay setup

The following solution only works for accounts with Fairplay configuration.

The following setup uses the react-native open source plugin for video playback called "react-native-video".

react-native-video compatible version: 5.2.0

Getting started

  • Add below code to react-native.config.js file -

    module.exports ={ 
    dependencies: {
    'react-native-video': {
    platforms: {
    android: {
    sourceDir:
    '../node_modules/react-native-video/android-exoplayer',
    },
    },
    },
    },
    }
  • Add below line in scripts in package.json

    "postinstall": "vdo-patch"

Install Packages

npm install react-native-video@5.2.0
npm install https://vdocipher.s3.amazonaws.com/archive/react-native-video-vdo-2.0.0.tar.gz
npx pod-install
npm i

Configure the Video Component

import React, {useState, useEffect} from 'react'; 
import {SafeAreaView, Text} from 'react-native';

import Video from 'react-native-video';
import {vdoRnSource} from 'react-native-video-vdo';

const App: () => React$Node = () => {
const [videoSource, setVideoSource] = useState(null);
useEffect(() => {
vdoRnSource({
otp: '_____',
playbackInfo: '____',
}).then(setVideoSource);
}, []);
return (
<>
<SafeAreaView>
<Text style={{fontSize: 40, padding: 20, fontWeight: 'bold'}}>
Sample video
</Text>
{videoSource && (
<Video controls {...videoSource} style={{height: 300}} onError={error => {
console.log("OnError: ", error)
}} />
)}
</SafeAreaView>
</>
);
};

export default App;

All APIs available on the original react-native-video plugin works here as well.