在找Vue.js的版本吗? 转到这里 -- > @preflight-hq/rrweb-player-vue (英语)
网络播放器
由于 rrweb 的 replayer 仅提供基本的 UI, 您可以选择 rrweb 的 replayer , 它基于 rrweb 的 公共 API , 但具有 特性丰富的 replayer UI .
这跟以前有什么不同 rrweb.Replayer? 吗?
rrweb-player在引擎盖下使用rrweb's Replayer,但由于Replayer没有包含任何用于控制的UI,rrweb-player添加了这些.
安装
rrweb-player 也可以包含其中 <script>数字 :
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
或通过使用国家预防机制安装:
npm install --save rrweb-player
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
使用量
new rrwebPlayer({
target: document.body, // customizable root element
props: {
events,
},
});
选项
| 键 | 默认 | 说明 |
|---|---|---|
| 事件 | [ | 用于重放的事件 |
| 宽度 | 第1024号 | 重排层的宽度 |
| 高度 | 576个 | 递解器的高度 |
| 最大比例 | 1个 | 重排器的最大比例(1=100%),无限设定为0 |
| 自动播放 | 真实 | 是否自动播放 |
| 速度 | 1个 | 默认播放速度 |
| 速度选项 | [1、2、4、8] | 用户界面中的速度选项 |
| 显示控制器 | 真实 | 是否显示控制器 UI |
| 标记 | {} | 用密钥值映射自定义事件样式 |
| 不活动颜色 | #D4D4D4 请检查URL=值 (帮助) | 使用有效的 CSS 颜色字符串自定义进度栏中非活动时段指标的颜色 . |
| . | - 说吧 | 这些 rrweb 复制器选项 将被绕过 |
rwebPlayer 组件上的方法
addEventListener(event: string, handler: (params: any) => unknown): void;
addEvent(event: eventWithTime): void;
getMetaData() => {
startTime: number;
endTime: number;
totalTime: number;
}
getReplayer() => Replayer;
getMirror() => Mirror;
在游戏/暂停之间切换
toggle();
设定播放器的速度
setSpeed(speed: number)
打开/ 关闭跳过不活动
toggleSkipInactive();
触发器调整大小, 当您更改宽度/ 高度时执行此任务
triggerResize();
重放游戏
play();
暂停重放
pause();
到一个时间点,暂停或演奏从那时开始
goto(timeOffset: number, play?: boolean)
播放时间和(可选)循环
playRange(
timeOffset: number,
endTimeOffset: number,
startLooping: boolean = false,
afterHook: undefined | (() => void) = undefined,
)