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 7
• Usage 8 ​ 9 ​ 10

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
}
35

36 ​ 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