react-native-txplayer

腾讯云点播播放器 RN 封装,支持多种播放格式,支持 android 和 ios

Getting started

$ npm install react-native-txplayer --save

Mostly automatic installation

$ react-native link react-native-txplayer

Manual installation

Usage

import RNTXplayer from 'react-native-txplayer';

const source='http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4'

<RNTXplayer source={source} style={{ width: screenWidth, height: 200 }} />;

Props

| name | description | | ---------------- | ---------------- | | source | 播放资源 | | poster | 封面图 | | enableFullScreen | 是否允许全屏 | | themeColor | 主题色 | | onFullScreen | 全屏事件 | | onCompletion | 播放完毕事件 | | enableCast | 是否显示投屏按钮 | | onCastClick | 投屏按钮点击事件 | | onChangeBitrate | 分辨率切换 | | onProgress | 进度回调 | | onPrepare | 播放准备回调 |

Method

| name | parmas | description | | ---------- | ---------- | ------------- | | play | true/false | 开始/暂停播放 | | fullscreen | true/false | 控制是否全屏 | | stop | / | 停止播放 | | seekTo | number(秒) | 快进到多少秒 |

this.RNTXplayerRef.play();
this.RNTXplayerRef.fullscreen();

Custom ui

自定义控制层 UI

import TXViewPlayer from 'react-native-txplayer/TXViewPlayer';

// TXViewPlayer 支持参数可见源码 TXViewPlayer.propTypes
<TXViewPlayer>
  <CustomUi />
</TXViewPlayer>;