React Native Advanced Video Player

A video player for react native with advanced controls made for react native.

• Swipe To Seek
• Native Brightness & Volume Controls
• Playing videos directly from a link or from a local path
• Supports RTMP & HLS live streaming

Peer Dependencies

This packages depends on the below packages to function properly:

• Orientation Locker - Uses to force the user include landscape/portrait mode
• Safe aArea - Uses to calculate fullscreen dimensions for iOS with safe area insets
• Home Indicator - Uses to hide iOS home indicator on newer gen iPhones

Installation

Install the dependencies at the root of your React Native project.

For React Native > 0.60

$ npm install --save react-native-advanced-video-player

For React Native < 0.59

$ npm install --save react-native-advanced-video-player
$ react-native link react-native-advanced-video-player

Additional Configurations

Android

MainApplication.java

import com.rn_advanced_video_player.AdvancedVideoPackage;

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    ...
    packages.add(new AdvancedVideoPackage());
    return packages;
}

iOS

Download the icons required for the iOS side to work from the link below:- https://drive.google.com/drive/folders/1MJgxymYo5_6rjimKgKXn5OIwSkckb0C3?usp=sharing

Paste the icons into your Project.xcworkspace/Images.xcassets directory

Basic Usage

import RNVideoPlayer from "react-native-advanced-video-player";

<RNVideoPlayer
    source={"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}
    playerStyle={{
      width: 300,
      height: 450
    }}
/>

Props

| Property | Type | Default | Descrption | | ------ | ------ | ----- | ------ | | source | string | null | URL or path to video | | playerStyle | object | {} | Styling for the player container | | fullscreen | boolean | false | Determines whether the button should show fullscreen or not at first | | swipeToSeek | boolean | true | When true, user can swipe on the container to seek the video. NOT AVAILABLE for RTMP stream | | seekBarColor | string | #ffffff | Custom color for seekbar | | showFullscreenControls | boolean | true | Shows the fullscreen and back button | | showLikeButton | boolean | true | Shows the like button | | showShareButton | boolean | true | Shows the share button | | showDownloadButton | boolean | true | Shows the download button |

Callbacks

| Property | Descrption | | ------ | ------ | | onFullscreen | When the fullscreen button is pressed | | onBackPressed | When the back button is pressed | | onLikePressed | When the like button is pressed | | onSharePressed | When the share button is pressed | | onDownloadPressed | When the download button is pressed | | onControlsShow | When the controls overlay is shown | | onControlsHide | When the controls overlay is hidden | | onEnterFullsceen | When the video player enters fullscreen mode | | onLeaveFullscreen | When the video player leaves fullscreen mode |

Methods

| Property | Descrption | | ------ | ------ | | pause | Pauses the videoplayer | | play | Plays the videoplayer | | mutePlayer | Mutes the videoplayer | | unmutePlayer | Unmutes the videoplayer | | showSystemHUD | Method to switch to showing native iOS volume bar HUD | *ONLY FOR iOS | | killVideoPlayer | Kills video player instance, CALL to make sure video is stopped playing in background |

Todos

• Add more props to make it more configurable

License

MIT

Free Software, Hell Yeah!