react-native-pili-player

Pili PLPlayerKit React Native SDK

Introduction

这是由七牛官方PLPlayer pili-react-native版本修改而来，增加一些功能函数，，集成到 iOS 和 Android 。

支持直播和点播功能，具体详情可以去七牛官方查看

Android GIT: https://github.com/pili-engineering/PLDroidPlayer

Android API: http://pili-docs.cloudvdn.com/android-player/index.html

IOS GIT: https://github.com/pili-engineering/PLPlayerKit

IOS API:http://cocoadocs.org/docsets/PLPlayerKit

注：

本人不会原生开发，所以参照其他组件修改和添加一些功能，如果有不对的地方请指正。

Installation

IOS:

在你的项目ios目录下面新建一个Profile文件:

    platform :ios, '8.0'
    target '你的项目名称' do
        pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'    
        pod 'React', path: '../node_modules/react-native/'    
        pod 'RCTPlayer', path: '../node_modules/react-native-pili-player/ios/'    
    end

然后在ios目录下 执行 pod install 然后把ios/Pods录下 Pods.xcodeproj添加到 Libraries下

1. 如果是 iOS 10 需要在 info 中额外添加如下权限:

    <key>NSCameraUsageDescription</key>    
    <string>cameraDesciption</string>

    <key>NSContactsUsageDescription</key>    
    <string>contactsDesciption</string>

    <key>NSMicrophoneUsageDescription</key>    
    <string>microphoneDesciption</string>

ref: iOS 10

Android

make the following additions to the given files manually:

android/settings.gradle

include ':react-native-pili-player'
project(':react-native-pili-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pili-player/android')

android/app/build.gradle

dependencies {
   ...
   compile project(':react-native-pili-player')
}

MainApplication.java

On top, where imports are:

import com.pili.rnpili.PiliPackage;

Add the ReactVideoPackage class to your list of exported packages.

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

Usage

1. 直播

import {Live} from 'react-native-pili-player';
 
          <Live
            ref={(ref) => {
              this.player = ref
            }} 
            source={{
            uri: "rtmp://live.hkstv.hk.lxdns.com/live/hks",
            timeout: 10 * 1000,
            hardCodec: false
          }}
          paused={false}
          aspectRatio={2}
          onLoading={})}
          onPaused={})}
          onStop={})}
          onError={})}
          onReady={}}
          onPlaying={})}
            onProg={({currentTime})=>{console.log(totalTime)}}
          />

2. 点播

import {Playey} from 'react-native-pili-player';
 
       <Player
          ref={(ref) => {
              this.player = ref
            }} 
          source={{            
            uri:'http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4',
            timeout: 10 * 1000,
            hardCodec: false
          }}
          paused={false}
          loop={false}
          aspectRatio={2}
          onLoading={})}
          onPaused={})}
          onStop={})}
          onError={})}
          onReady={}}
          onPlaying={})}
          onProg={({currentTime,totalTime})=>{console.log(currentTime)}}
       />
   
   this.player.seek(0.1)

PLPlayer

• Android: SDK v2.0.4
• iOS: SDK v3.1.0