Skip to content

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

importReactfrom'react'importApsaraPlayerfrom'react-native-apsara-player';consturiSource={uri: "https://player.alicdn.com/video/aliyunmedia.mp4"}conststsSource={sts: {vid: 'YOUR_VID'region: 'YOUR_REGION',accessKeyId: 'YOUR_ACCESS_KEY_ID',accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',securityToken: 'YOUR_SECURITY_TOKEN',},}constauthSource={auth: {vid: 'YOUR_VID'region: 'YOUR_REGION',playAuth: 'YOUR_PLAY_AUTH',},}exportdefaultclassextendsReact.Component{render(){return(<ApsaraPlayerref={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

propdefaulttypedescription
pausedfalseBooleanWhether the video is paused
repeatfalseBooleanWhether to repeat the video
mutedfalseBooleanWhether the audio is muted
volume1NumberAdjust the volume
sourcenoneObjectSource of the video
onEndnoneFunctionCallback function that is called when the player reaches the end of the media
onLoadnoneFunctionCallback function that is called when the video is loaded
onSeeknoneFunctionCallback function that is called when a seek completes
onErrornoneFunctionFunction that is invoked when the video load fails
onProgressnoneFunctionFunction that is invoked when the video is updates

Requirements

  • react-native >= 0.60.0

License

MIT

About

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

Topics

Resources

Stars

26 stars

Watchers

2 watching

Forks

Releases

Used by

Contributors

Languages