JSPM – react-native-pili-player@0.0.1

Package Exports

react-native-pili-player

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-pili-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

#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下

如果是 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