react-native-apsara-video v0.3.3

react-native-apsara-video

A react-native wrapper around aliyun video player

Check the example for more details

Installation

Using npm:

npm install --save react-native-apsara-video

or yarn:

yarn add --save react-native-apsara-video

React Native 0.60 and above

Run pod install in the ios directory.

React Native 0.59 and below

Run react-native link react-native-apsara-video to link library.

iOS

https://facebook.github.io/react-native/docs/linking-libraries-ios

Android

android/settings.gradle

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

MainApplication.java

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

Usage example

import React from 'react'
import ApsaraVideo from 'react-native-apsara-video';

const uriSource = { auth: undefined, sts: undefined, uri: "https://player.alicdn.com/video/aliyunmedia.mp4" }

const stsSource = {
  auth: undefined,
  sts: {
    vid: 'YOUR_VID',
    region: 'YOUR_REGION',
    accessKeyId: 'YOUR_ACCESS_KEY_ID',
    accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',
    securityToken: 'YOUR_SECURITY_TOKEN',
  },
  uri: undefined,
}

const authSource = {
  auth: {
    vid: 'YOUR_VID',
    region: 'YOUR_REGION',
    playAuth: 'YOUR_PLAY_AUTH',
  },
  sts: undefined,
  uri: undefined,
}

export default class extends React.Component {
  render() {
    return (
      <ApsaraVideo
        ref={ref => {
          this.player = ref
        })
        source={uriSource}
        paused={true}
        onLoad={this._onLoad}
        onSeek={this._onSeek}
        onError={this._onError}
        onProgress={}
      />
    )
  }
};

Component props