react-native-video-players v1.0.6

React Native Video Player

This library is designed to support custome video player controls in React Native for both iOS and Android in both state forground and background.

Features

• Fullscreen support for Android and iOS.
• Having option to navigate from media-player screen.
• Support share media file url.
• Having functionality to do favourite/unfavourite on any media.
• Support Portrait and Landscape mode.
• Set Custom video quality.
• Having custom controls on media like suffel, auto-loop, auto-play.
• Support forward/ backward by buttons and also seek-bar drag.
• Having next/back, play/pause buttons on media player.
• Background video/audio play support with all custom controls.
• Music controls on notification bar when app is inactive.

Installation

$ yarn add react-native-video-players

Or

$ npm install react-native-video-players

Usage

import VideoPlayers from 'react-native-video-players';
onst styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

const url = ['https://your-url.com/video.mp4']

class VideoExample extends React.Component {

  render() {
    return (
      <View style={styles.container}>
       <VideoPlayers
        source={{
          uri: url,
        }}
        title={'Video title'}
        paused={paused}
        resizeMode={'contain'}
        playInBackground={true}
        playWhenInactive={true}
        controlTimeout={2000}
      />
      </View>
    )
  }
}

AppRegistry.registerComponent('VideoExample', () => VideoExample)

Install

npm i react-native-video --save
npm i react-native-music-control --save
npm i react-native-orientation --save

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

iOS installation

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.

Using CocoaPods (required to enable caching)

Setup your Podfile like it is described in the react-native documentation.

Depending on your requirements you have to choose between the two possible subpodspecs:

Video only:

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

  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

Android installation

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.

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:

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:

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

android.useAndroidX=true
android.enableJetifier=true

MainApplication.java

On top, where imports are:

import com.brentvatne.react.ReactVideoPackage;

Add the ReactVideoPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactVideoPackage()
    );
}

Mandatory Steps For Background Support

iOS

To get audio/video in IOS when app is in background

From x-code in capabilities add background modes and enable audio mode.

Also add following entries to get orientation in landscape :-

Add this lines into appDelegate.m file.

#import "Orientation.h"

- (UIInterfaceOrientationMask)application:(UIApplication )application supportedInterfaceOrientationsForWindow:(UIWindow )window {
  return [Orientation getOrientation];
}

Android

Add the android.permission.FOREGROUND_SERVICE permission to your AndroidManifest.xml.

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

Props