@zt-mobile/react-native-advanced-video-player
v1.24.3
Published
TODO
Downloads
12
Readme
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!