react-native-advanced-video-player

1.24.3 • Public • Published

React Native Advanced Video Player

Build Status

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
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!

Package Sidebar

Install

npm i react-native-advanced-video-player

Weekly Downloads

158

Version

1.24.3

License

MIT

Unpacked Size

9.44 MB

Total Files

1930

Last publish

Collaborators

  • hannzernzchwantech