npm:react-native-apsara-video

README

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

Standard Method

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.

Manually Method

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

prop	default	type	description
paused	false	Boolean	Whether the video is paused
repeat	false	Boolean	Whether to repeat the video
muted	false	Boolean	Whether the audio is muted
volume	1	Boolean	Adjust the volume
source	none	Object	Source of the video
onLoad	none	Function	Callback function that is called when the video is loaded
onSeek	none	Function	Callback function that is called when a seek completes
onError	none	Function	Function that is invoked when the video load fails
onProgress	none	Function	Function that is invoked when the video is updates

Usage no npm install needed!