1.24.3 • Published 2 years ago
@zt-mobile/react-native-advanced-video-player v1.24.3
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-playerFor React Native < 0.59
$ npm install --save react-native-advanced-video-player
$ react-native link react-native-advanced-video-playerAdditional 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!