# react-native-apsara-video

**Repository Path**: zhanlan/react-native-apsara-video

## Basic Information

- **Project Name**: react-native-apsara-video
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-12-02
- **Last Updated**: 2020-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## react-native-apsara-video
A react-native wrapper around [aliyun video player](https://help.aliyun.com/document_detail/125579.html)

Check the `example` for more details


### Installation

Using npm:
```shell
npm install --save react-native-apsara-video
```

or yarn:
```shell
yarn add --save react-native-apsara-video
```

<details>
  <summary>Standard Method</summary>

**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.
</details>

<details>
  <summary>Manually Method</summary>

#### iOS
[https://facebook.github.io/react-native/docs/linking-libraries-ios](https://facebook.github.io/react-native/docs/linking-libraries-ios)

#### Android

**android/settings.gradle**
```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**

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


### Usage example
```javascript
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 |