@pangu/react-native-ksyvideo

react-native-video-player

Source Type: Open Source

Media Player for React-Native, base on KSYMediaPlayer.

More details about KSYMediaPlayer, please click the link blow:

• [KSYMediaPlayer Android SDK for vod or live streaming playing][player_android]
• [KSYMediaPlayer iOS SDK for vod or live streaming playing][player_ios]

Android support

iOS support

1. About

A <KSYVideo> component for react-native,requires react-native >= 0.49.0

1.1 Add it to your project

• Install via npm

Run npm install @pangu/react-native-ksyvideo --save

1.2 Usage Example

<KSYVideo source={{uri: "rtmp://"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
  
       volume={1.0}                            
       muted={false}                           
       paused={false}                          // Pauses playback entirely.
       resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
       repeat={true}                           // Repeat forever.
       playInBackground={false}                // Audio continues to play when app entering background.
       progressUpdateInterval={250.0}          // Interval to fire onProgress (default to ~250ms)
       onLoadStart={this.loadStart}            // Callback when video starts to load
       onLoad={this.setDuration}               // Callback when video loads
       onProgress={this.setTime}               // Callback every ~250ms with currentTime
       onEnd={this.onEnd}                      // Callback when playback finishes
       onError={this.videoError}               // Callback when video cannot be loaded
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       style={styles.backgroundVideo} />


// Later on in your styles..
const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

2. Android Integration

Run react-native link to link the @pangu/react-native-ksyvideo library.

Or if you have trouble, make the following additions to the given files manually:

android/settings.gradle

include ':@pangu/react-native-ksyvideo'
project(':@pangu/react-native-ksyvideo').projectDir = new File(rootProject.projectDir, '../node_modules/@pangu/react-native-ksyvideo/android')

android/app/build.gradle

dependencies {
   ...
   compile project(':@pangu/react-native-ksyvideo')
}

MainApplication.java

On top, where imports are:

import com.ksyun.media.reactnative.ReactKSYVideoPackage;

Add the ReactKSYVideoPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactKSYVideoPackage()
    );
}

3. iOS Integration

Run react-native link to link the @pangu/react-native-ksyvideo library.

Add KSYMediaPlayer.framework(which is in node_modules/@pangu/react-native-ksyvideo/ios directory) to your project setting 'target->Build Phases->Link Binary With Libraries'.

Add Framework Search Path : '../node_modules/@pangu/react-native-ksyvideo/ios'

4. Remarks

If you want to updata native sdk for KSYVideo,make the following additions

4.1 Android

The KSYVideo is dependented on jcenter,you can modify the dependencies ,update to high version

build.gradle(Module:@pangu/react-native-ksyvideo)

dependencies {

    compile "com.facebook.react:react-native:+"  // From node_modules
    compile 'com.ksyun.media:libksyplayer-arm64:2.2.4'
    compile 'com.ksyun.media:libksyplayer-x86:2.2.4'
    compile 'com.ksyun.media:libksyplayer-armv7a:2.2.4'
    compile 'com.ksyun.media:libksyplayer-java:2.2.4'
}

4.2 iOS

Get the latest framework of KSYMeidaPlayer_iOS at https://github.com/ksvc/KSYMediaPlayer_iOS/releases, then replace the old framework in node_modules/@pangu/react-native-ksyvideo/ios directory

5. LICENSE

Apache 2.0

6. SDK

player_android

player_ios