Skip to content

A React Native wrapper around AliyunVideo SDK (阿里云视频播放器)

License

Notifications You must be signed in to change notification settings

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