Skip to content

hehex9/react-native-apsara-player

Repository files navigation

react-native-apsara-player

A react-native wrapper around aliyun video player

Check the example for more details

Installation

yarn add react-native-apsara-player
npx pod-install

Usage example

import React from 'react'
import ApsaraPlayer from 'react-native-apsara-player';

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

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

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

export default class extends React.Component {
  render() {
    return (
      <ApsaraPlayer
        ref={ref => {
          this.player = ref
        })
        source={uriSource /* or stsSource or authSource */}
        paused={true}
        onEnd={this._onEnd}
        onLoad={this._onLoad}
        onSeek={this._onSeek}
        onError={this._onError}
        onProgress={this._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 Number Adjust the volume
source none Object Source of the video
onEnd none Function Callback function that is called when the player reaches the end of the media
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

Requirements

  • react-native >= 0.60.0

License

MIT