react-native-video-players

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

$ 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

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.

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

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.

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

iOS Setup

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

Android Setup

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

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

Props

Prop	Type	Required	Default	Description
url	string, number	Yes		A URL string (or number for local) is required.
isAutoPlay	bool	No		false
autoPlayFunc	bool	No	false	Autoplays the video as soon as it's loaded
loop	bool	No	false	Allows the video to continuously loop
title	string	No	''	Adds a title of your video at the top of the player
theme	string	No	'white'	Adds an optional theme colour to the players controls
hideFullScreenControl	bool	No	false	This hides the full screen control
style	number, object	No	{}	Apply styles directly to the Video player (ignored in fullscreen mode)
resizeMode	string	No	'contain'	Fills the whole screen at aspect ratio. contain, cover etc
isRepeat	bool	No	false	This is to active repeat play of a single video.
playInBackground	bool	No	false	Audio continues to play when app enters background.
playWhenInactive	bool	No	false	[iOS] Video continues to play when control or notification center are shown.
onLoad	function	No	(data) => {}	Returns data once video is loaded
onProgress	function	No	(progress) => {}	Returns progress data
onEnd	function	No	() => {}	Invoked when video finishes playing
onError	function	No	(error) => {}	Returns an error message argument
onPlay	function	No	(playing) => {}	Returns a boolean during playback
error	boolean, object	No	true	Pass in an object to Alert. See https://facebook.github.io/react-native/docs/alert.html
theme	object	No	all white	Pass in an object to theme. (See example below to see the full list of available settings)
controlTimeout	number	No	3	Set the visibility of controls button and the progress bar after the video was started
isFavoriteShow	bool	No	false	Show favorite icon on controls
favorite	function	No	()=>{}	Invoked when favorite icon is pressed
isFavorite	bool	No		Pass true will mark video as favorite
isSettingShow	bool	No		Required true to show setting icon.
isVideoSettingsOpen	bool	No		Pass state true to open setting
onMorePress	bool	No	false	Adds an action button at the top right of the player to perform action on isVideoSettingsOpen state
qualityArray	array	No	['320p', '480p', '720p', '180p']	set pixel as per requied.
autoConnectionStatus	bool	No	True	state to manage autoConnection Status
IsAutoConnectionStatus	function		() => {}	Invoked when autoConnectionStatus is change
boxSelected	bool			state to manage selected quality option
IsQualityArray	function	No	(data,index) => {}	Invoked when we select quality
isShareShow	bool	No	false	To show share icon on video control
share	function	No	() => {}	Invoked when click in share button
nextMedia	function	No	() => {}	Invoked when click on nextMedia from music control
previousMedia	function	No	() => {}	Invoked when click on previousMedia music control
back	function	No	() => {}	Invoked when click on backButton from video player control
next	function	No	() => {}	Invoked when click on nextButton from video player control
isShuffle	bool	No		used to manage isShuffle state
shuffle	function	no	() => {}	Invoked on shffle button
backToList	function	No	() => {}	Invoked on back button action
onSeekRelease	function	No	() => {}	Invoked on onSeekRelease

react-native-video-players