Skip to content

An-uking/react-native-pili-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b108ff4 · Dec 8, 2017

History

36 Commits
Dec 8, 2017
Dec 8, 2017
Dec 8, 2017
Dec 5, 2017
Dec 8, 2017
Dec 8, 2017
Dec 8, 2017
Dec 8, 2017
Dec 8, 2017

Repository files navigation

#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

npm install react-native-pili-player or yarn add react-native-pili-player

#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

About

a react native component for IOS and android

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published