@tg1518/react-native-txplayer

腾讯云点播播放器 RN 封装,支持多种播放格式,支持 android 和 ios 【搬砖修改】

Getting started

$ npm install @tg1518/react-native-txplayer --save

Mostly automatic installation

$ react-native link @tg1518/react-native-txplayer

Manual installation

Usage

import RNTXplayer from '@tg1518/react-native-txplayer';

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

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

更新

2022/4/19 修改了全屏不旋转手机 添加是否显示进度条 【主要用于直播隐藏进度条】

Props

| name | description | | ---------------- | ---------------- | | source | 播放资源 | | poster | 封面图 | | enableFullScreen | 是否允许全屏 | | progressBar | 是否显示进度条 | | themeColor | 主题色 | | onFullScreen | 全屏事件 | | onPlay | 播放暂停事件 | | onCompletion | 播放完毕事件 | | enableCast | 是否显示投屏按钮 | | isCustomStyle | 全屏是否使用自定义样式 | | 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>;