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
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>;Skip to content Search or jump to… Pull requests Issues Marketplace Explore
@liangsay LewinJun / react-native-aliyunplayer Public Code Issues 1 Pull requests Actions Projects Wiki Security Insights You’re making changes in a project you don’t have write access to. We’ve created a fork of this project for you to commit your proposed changes to. Submitting a change will write it to a new branch in your fork, so you can send a pull request. react-native-aliyunplayer / README.md in LewinJun:main
Spaces
4
Soft wrap 1
react-native-lewin-aliyunplayer
2 阿里云播放器 react native,播放暂停等1.0版本没有UI，需自定义 3 4 5
Table of contents
6
Install
11
1: yarn add 或者npm install
12
yarn add react-native-lewin-aliyunplayer
13
14
2: android需要配置build.gradle maven {url 'https://maven.aliyun.com/repository/releases'}
15
16
allprojects {
17
repositories {
18
mavenLocal()
19
maven {
20
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
21
url("$rootDir/../node_modules/react-native/android")
22
}
23
maven {
24
// Android JSC is installed from npm
25
url("$rootDir/../node_modules/jsc-android/dist")
26
}
27
maven {
28
url 'https://maven.aliyun.com/repository/releases'
29
}
30
google()
31
jcenter()
32
maven { url 'https://www.jitpack.io' }
33
}
34
}
3536 37
Usage
38
39
this.player?.startPlay() : this.player?.pausePlay()
40
<AliPlayer
41
ref={(e) => this.player = e}
42
style={{ flex: 1 }}
43
source='https://d-appimg.doctopia.com.cn/video/1626170384423967.mp4'
44
setAutoPlay={true}
45
setLoop={true}
未选择任何文件
Attach files by dragging & dropping, selecting or pasting them.
@liangsay
Propose changes
Commit summary
Create README.md
Optional extended description
Add an optional extended description…
© 2022 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About