1.2.15 • Published 2 years ago
react-native-aliplayer-b v1.2.15
react-native-aliplayer
阿里云点播播放器 RN 封装,支持多种播放格式,支持 android 和 ios
Getting started
$ npm install react-native-aliplayer --save
Mostly automatic installation
$ react-native link react-native-aliplayer
Manual installation
Android
add maven { url 'https://maven.aliyun.com/repository/releases' } in allprojects.repositories
Usage
import RNAliplayer from 'react-native-aliplayer';
const source='http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4'
<RNAliplayer source={source} style={{ width: screenWidth, height: 200 }} />;Props
| name | description |
|---|---|
| source | 播放资源 |
| poster | 封面图 |
| enableFullScreen | 是否允许全屏 |
| themeColor | 主题色 |
| onFullScreen | 全屏事件 |
| onCompletion | 播放完毕事件 |
| enableCast | 是否显示投屏按钮 |
| onCastClick | 投屏按钮点击事件 |
| onChangeBitrate | 分辨率切换 |
| onProgress | 进度回调 |
| onPrepare | 播放准备回调 |
| isLandscape | 全屏是否横屏 |
Method
| name | parmas | description |
|---|---|---|
| play | true/false | 开始/暂停播放 |
| fullscreen | true/false | 控制是否全屏 |
| stop | / | 停止播放 |
| seekTo | number(秒) | 快进到多少秒 |
this.RNAliplayerRef.play();
this.RNAliplayerRef.fullscreen();Custom ui
自定义控制层 UI
import ALIViewPlayer from 'react-native-aliplayer/ALIViewPlayer';
// ALIViewPlayer 支持参数可见源码 ALIViewPlayer.propTypes
<ALIViewPlayer>
<CustomUi />
</ALIViewPlayer>;