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!

    Install

    npm i react-native-advanced-video-player

    DownloadsWeekly Downloads

    12

    Version

    1.24.3

    License

    MIT

    Unpacked Size

    9.44 MB

    Total Files

    1930

    Last publish

    Collaborators

    • hannzernzchwantech