CloudHub 文档中心
下载中心 文档中心

RTS 实时流直播


快速集成 SDK

准备

rtswebplayer.js 的导入,选择如下任意一种方法获取

直接引入

例如:

<script src="https://downloads.cloudhub.vip/rts/sdk/web/rtswebplayer-1.0.3.js" type="text/javascript"></script>

Note: 使用这种方式导入则会在 window 下绑定 rtswebplayer, 因此可以直接使用 window.rtswebplayer

npm 获取 SDK

使用该方法需要先安装 npm,详见 npm 快速入门

  1. 运行安装命令:
npm install rts-web-player --save
  1. 在你的项目引入这个模块:
import rtswebplayer from 'rts-web-player';

基本流程

1. 创建html视图

<div id="playVideoBox"></div>

2. 引入播放器

<script src="https://downloads.cloudhub.vip/rts/sdk/web/rtswebplayer-1.0.3.js" type="text/javascript"></script>

3. 创建播放器对象

const { RtsPlayer } = window.rtswebplayer;
rtsPlayer = new RtsPlayer('playVideoBox', {
    pullUrl,
});

4. 监听播放器状态

rtsPlayer.on('play', (data) => {
    // 视频开始播放
});
rtsPlayer.on('pause', (data) => {
    // 视频暂停
});
rtsPlayer.on('volumechange', (data) => {
    // 视频音量改变
});
rtsPlayer.on('fullscreenchange', (data) => {
    // 是否全屏
});

5. 开始播放

rtsPlayer.startPlay().then(()=> {
    console.log('播放成功');
}).catch((error) => {
    console.error('播放失败');
});

6. 暂停播放

rtsPlayer.pause();

7. 继续播放

rtsPlayer.resume();

8. 结束播放

rtsPlayer.stopPlay()