rrweb-player

概述

使用本包可以开箱即用地获得功能丰富的回放 UI；如果你想构建自己的 UI，请使用 @rrweb/replay 包。

这就是云端控制台中使用的同款回放器。如果你想试用自己网站的回放效果，可以注册账号，并使用 "Test record any webpage" 书签工具快速录制一段。

这与 `new Replayer()` 有何不同？

new Replayer() 来自更底层的 @rrweb/replay 包，它在 iframe 中渲染并重建 rrweb 事件流。本包在其基础上，使用 Svelte UI 框架提供播放/暂停控件和时间轴等 UI。两者命名相似确实容易造成混淆，我们计划在未来的主要版本中解决。

安装

1) 打包器 / npm（推荐）

shell

npm install rrweb-player

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

2) 不使用打包器的浏览器环境（ESM）

html

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/rrweb-player/current/style.css"
/>
<script type="module">
  import rrwebPlayer from 'https://cdn.rrweb.com/rrweb-player/current/rrweb-player.js';
</script>

使用 current 指向最新稳定版本，或固定到精确版本（例如 https://cdn.rrweb.com/rrweb-player/2.0.0/rrweb-player.js），以获得不可变的生产环境 URL。完整的 URL 结构和目录参见 CDN 资源文档。

3) 传统的直接 `<script>` 引入方式（UMD 回退方案）

仅用于兼容非模块化环境。

html

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/rrweb-player/current/style.css"
/>
<script src="https://cdn.rrweb.com/rrweb-player/current/rrweb-player.umd.cjs"></script>

用法

new rrwebPlayer({
  target: document.body, // customizable root element
  props: {
    events,
  },
});

选项

键	默认值	描述
events	[]	用于回放的事件
width	1024	回放器的宽度
height	576	回放器的高度
maxScale	1	回放器的最大缩放比例（1 = 100%），设为 0 表示不限制
autoPlay	true	是否自动播放
speed	1	默认回放速度倍率
speedOption	[1, 2, 4, 8]	UI 中的速度选项
showController	true	是否显示控制器 UI
tags	`{}`	使用键值对映射自定义各类自定义事件的样式
inactiveColor	#D4D4D4	使用有效的 CSS 颜色字符串，自定义进度条中无交互时段指示器的颜色。
...	-	所有 rrweb Replayer 选项都会被透传

rrwebPlayer 组件的方法

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,
  )

在 GitHub 上编辑 README

rrweb-player 发布说明

2.1.1

补丁变更

#1901 a11f8ef 感谢 @kevinvandijk！ - 修复 rrweb-player 生产构建，使 Svelte 生命周期 API 解析到浏览器运行时而不是桩代码
更新依赖 []：
- @rrweb/replay@2.1.1
- @rrweb/packer@2.1.1

2.1.0

补丁变更

更新依赖 [7f0f75f]：
- @rrweb/replay@2.1.0
- @rrweb/packer@2.1.0

2.0.1

补丁变更

更新依赖 []：
- @rrweb/replay@2.0.1
- @rrweb/packer@2.0.1

2.0.0

重大变更

#1497 2606a2a 感谢 @Juice10！ - 分发文件采用了新的文件名、路径和扩展名。重要提示：如果你直接引用分发文件或类型，可能需要更新你的路径/文件名，例如你从 rrweb/typings/... 或 rrdom/es 导入。但如果你是通过 import rrweb from 'rrweb' 使用，则不会察觉到此变更带来的差异。如果你直接在 script 标签中引入 rrweb 文件，可能需要将路径更新为对应的 .umd.cjs 文件。所有 .js 文件现在都使用 ES 模块，可在现代浏览器、node.js 以及支持 ES 模块的打包器中使用。所有 npm 包现在还同时提供 .cjs 和 .umd.cjs 文件。.umd.cjs 文件是将所有文件打包在一起的 CommonJS 模块，便于向浏览器环境分发单个文件（类似于之前的 .js 文件）。.cjs 文件是可在旧版 Node.js 环境中使用的 CommonJS 模块。类型在 package.json 中有了更完善的定义，如果你需要特定类型，它们可能从新的包中导出（例如 PlayerMachineState 和 SpeedMachineState 现在从 @rrweb/replay 导出）。请查看 package.json 的 main 和 exports 字段了解可用文件。
#1031 ad9bc3e 感谢 @Juice10！ - 将共享的 rrweb 事件和录制器类型移至新的 @rrweb/types 包。

次要变更

#1039 bdd8940 感谢 @DexxDing！ - 在播放器进度条中添加无交互时段指示器，并提供可配置的 inactiveColor 选项。
#1007 3924aaf 感谢 @Juice10！ - 新增 player.playRange(start, end, loop?, afterHook?)，用于播放限定的时间区间，可选循环播放或在区间结束时触发回调。
#1006 6f63cf1 感谢 @Juice10！ - 新增 maxScale 选项，用于配置播放器的最大回放缩放比例，0 表示不限制缩放。
#859 e238462 感谢 @Juice10！ - 新增按配置的 FPS 录制 canvas 快照的支持。
#895 de755ae 感谢 @Juice10！ - 为回放新增快进虚拟 DOM 优化。

补丁变更

#1198 b5e30cf 感谢 @charliegracie！ - 改为在 Controller 的 goto 中重置 finished 标记，而不是在 handleProgressClick 中，以便直接调用 goto 时也能正确处理。
#1287 efdc167 感谢 @Juice10！ - 将所有项目升级到 typescript 4.9.5
#1126 227d43a 感谢 @YunFeng0817！ - 将所有 CommonJS 模块打包脚本的后缀从 'js' 重构为 cjs #1087。
#1247 a01a12e 感谢 @Juice10！ - 修复 rrwebPlayer 中 player.getMirror、player.playRange、player.$set 的类型
#1704 33e01f5 感谢 @eoghanmurray！ - 在 /dist/ 之外提供 /umd/ 输出目录，以便提供带 .js 扩展名的 UMD（Universal Module Definition）文件，同时不违背 package.json 中 /dist/ 下所有 .js 文件均为模块的约定
#1028 2286c11 感谢 @MengZihan712！ - 修复全屏播放器的尺寸问题，确保进度条和控制组件保持可见。
#1014 9de0de2 感谢 @Juice10！ - 在 rrweb-player 的 TypeScript 定义中补上缺失的 maxScale 选项，并为播放器选项补全默认值文档。
#1045 e08d039 感谢 @YunFeng0817！ - 修复 @rrweb/types 拆分后 rrweb-player 的 TypeScript 导入问题。
更新依赖 [b2d5689, a8478f1, ce6019d, bac1d7b, 5ba933c, fd85c79]：
- rrweb@2.0.0-alpha.2
更新依赖 [f1b23dd]：
- rrweb@2.0.0-alpha.1
更新依赖 [22bc4c3, db20184, 22bc4c3, 2606a2a, 2606a2a, 2606a2a, 33e01f5]：
- @rrweb/replay@2.0.0
- @rrweb/packer@2.0.0

2.0.0-alpha.16—20

仅跟随 @rrweb/replay 和 @rrweb/packer 的变更发布补丁

补丁变更

更新依赖 [db20184]：
- @rrweb/replay (2.0.0-alpha.16—20)
- @rrweb/packer (2.0.0-alpha.16—20)

2.0.0-alpha.15

重大变更

#1497 2606a2a 感谢 @Juice10！ - 分发文件采用了新的文件名、路径和扩展名。重要提示：如果你直接引用分发文件或类型，可能需要更新你的路径/文件名，例如你从 rrweb/typings/... 或 rrdom/es 导入。但如果你是通过 import rrweb from 'rrweb' 使用，则不会察觉到此变更带来的差异。如果你直接在 script 标签中引入 rrweb 文件，可能需要将路径更新为对应的 .umd.cjs 文件。所有 .js 文件现在都使用 ES 模块，可在现代浏览器、node.js 以及支持 ES 模块的打包器中使用。所有 npm 包现在还同时提供 .cjs 和 .umd.cjs 文件。.umd.cjs 文件是将所有文件打包在一起的 CommonJS 模块，便于向浏览器环境分发单个文件（类似于之前的 .js 文件）。.cjs 文件是可在旧版 Node.js 环境中使用的 CommonJS 模块。类型在 package.json 中有了更完善的定义，如果你需要特定类型，它们可能从新的包中导出（例如 PlayerMachineState 和 SpeedMachineState 现在从 @rrweb/replay 导出）。请查看 package.json 的 main 和 exports 字段了解可用文件。

补丁变更

更新依赖 [2606a2a, 2606a2a, 2606a2a]：
- @rrweb/packer@2.0.0-alpha.15
- @rrweb/replay@2.0.0-alpha.15

2.0.0-alpha.12—14

仅跟随 rrweb 的变更发布补丁

补丁变更

更新依赖 [03b5216, ae6908d, 46f1b25, cbbd1e5, e96f668, 3d1877c, 123a81e, 02f50d2, af0962c, 57a940a, 8aea5b0, 9c6edfe, 1e0b273, 1fe39ab, 05478c3, 58c9104, 980a38c, a2be77b, a7c33f2, 314a8dd, 7c0dc9d, 07ac5c9]：
- rrweb (2.0.0-alpha.12—14)

2.0.0-alpha.11

补丁变更

#1287 efdc167 感谢 @Juice10！ - 将所有项目升级到 typescript 4.9.5
更新依赖 [11f6567, efdc167]：
- rrweb@2.0.0-alpha.11

2.0.0-alpha.10

补丁变更

更新依赖 [7103625, d872d28, 36da39d, bbbfa22, d0fbe23, a3de582]：
- rrweb@2.0.0-alpha.10

2.0.0-alpha.9

补丁变更

#1247 a01a12e 感谢 @Juice10！ - 修复 rrwebPlayer 中 player.getMirror、player.playRange、player.$set 的类型
更新依赖 [490b3e2, a1ec9a2, 490b3e2, d7c72bf, ebcbe8b]：
- rrweb@2.0.0-alpha.9

2.0.0-alpha.8

补丁变更

#1198 b5e30cf 感谢 @charliegracie！ - 改为在 Controller 的 goto 中重置 finished 标记，而不是在 handleProgressClick 中，以便直接调用 goto 时也能正确处理。
更新依赖 [b5e30cf, 979d2b1, bc84246, aa79db7]：
- rrweb@2.0.0-alpha.8

2.0.0-alpha.7

补丁变更

更新依赖 [e0f862b, 267e990, d2582e9, a225d8e, a82a3b4, 1e6f71b, 1e6f71b, 4cb4d0e]：
- rrweb@2.0.0-alpha.7

2.0.0-alpha.6

补丁变更

更新依赖 [e65465e, f27e545, f6f07e9, 3416c3a, 8e47ca1, aaabdbd, 5e6c132]：
- rrweb@2.0.0-alpha.6

2.0.0-alpha.5

补丁变更

#1126 227d43a 感谢 @YunFeng0817！ - 将所有 CommonJS 模块打包脚本的后缀从 'js' 重构为 cjs #1087。
更新依赖 [1385f7a, 227d43a, 227d43a, 3cc4323, 502d15d, 8d209a6]：
- rrweb@2.0.0-alpha.5

rrweb-player ​

概述 ​

这与 new Replayer() 有何不同？ ​

安装 ​

1) 打包器 / npm（推荐） ​

2) 不使用打包器的浏览器环境（ESM） ​

3) 传统的直接 <script> 引入方式（UMD 回退方案） ​

用法 ​

选项 ​

rrwebPlayer 组件的方法 ​

rrweb-player 发布说明 ​

2.1.1 ​

补丁变更 ​

2.1.0 ​

补丁变更 ​

2.0.1 ​

补丁变更 ​

2.0.0 ​

重大变更 ​

次要变更 ​

补丁变更 ​

2.0.0-alpha.16—20 ​

补丁变更 ​

2.0.0-alpha.15 ​

重大变更 ​

补丁变更 ​

2.0.0-alpha.12—14 ​

补丁变更 ​

2.0.0-alpha.11 ​

补丁变更 ​

2.0.0-alpha.10 ​

补丁变更 ​

2.0.0-alpha.9 ​

补丁变更 ​

2.0.0-alpha.8 ​

补丁变更 ​

2.0.0-alpha.7 ​

补丁变更 ​

2.0.0-alpha.6 ​

补丁变更 ​

2.0.0-alpha.5 ​

补丁变更 ​

rrweb-player

概述

这与 `new Replayer()` 有何不同？

安装

1) 打包器 / npm（推荐）

2) 不使用打包器的浏览器环境（ESM）

3) 传统的直接 `<script>` 引入方式（UMD 回退方案）

用法

选项

rrwebPlayer 组件的方法

rrweb-player 发布说明

2.1.1

补丁变更

2.1.0

补丁变更

2.0.1

补丁变更

2.0.0

重大变更

次要变更

补丁变更

2.0.0-alpha.16—20

补丁变更

2.0.0-alpha.15

重大变更

补丁变更

2.0.0-alpha.12—14

补丁变更

2.0.0-alpha.11

补丁变更

2.0.0-alpha.10

补丁变更

2.0.0-alpha.9

补丁变更

2.0.0-alpha.8

补丁变更

2.0.0-alpha.7

补丁变更

2.0.0-alpha.6

补丁变更

2.0.0-alpha.5

补丁变更