aab4c553cb
* docs: revamp installation docs for esm and umd Document recommended install paths across the main guides and package READMEs for rrweb, @rrweb/all, @rrweb/record, @rrweb/replay, and rrweb-player. Clarify three usage modes: bundler/npm, browser no-build with import maps and +esm, and legacy UMD fallback. * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply formatting changes * Apply suggestion from @eoghanmurray Co-authored-by: Eoghan Murray <eoghan@getthere.ie> * Apply formatting changes * docs(all): streamline README usage section Move the guide link next to the import example and remove the duplicated Usage section to keep docs concise and easier to scan. * docs(readme): update gzip size badges in zh-cn readme * docs(plugins): update readme imports to scoped esm packages Replace `rrweb` default imports and `rrweb.Replayer` usage with `@rrweb/record` `record` and `@rrweb/replay` `Replayer` in plugin usage examples. Also update canvas WebRTC plugin imports to scoped `@rrweb/*` package names to keep docs aligned with current package structure. * docs: update docs to prefer scoped esm packages replace `rrweb` default import examples with `@rrweb/record` and `@rrweb/replay` across recipes and guides in en/zh-CN. clarify package selection for new integrations, add `@rrweb/all` convenience guidance, and refresh CDN/style import snippets for ESM and legacy UMD compatibility. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2.0 KiB
2.0 KiB
自定义回放 UI
当 Replayer 和 rrweb-player 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。
你可以通过以下几种方式从不同角度自定义回放 UI：
- 使用 rrweb-player 时，通过覆盖 CSS 样式表定制 UI。
- 使用 rrweb-player 时，通过
showController: false隐藏控制器 UI，重新实现控制器 UI。 - 通过
insertStyleRules在回放页面（iframe）内定制 CSS 样式。 - 基于
Replayer开发自己的回放器 UI。
实现控制器 UI
使用 rrweb-player 时，可以隐藏其控制器 UI：
import rrwebPlayer from 'rrweb-player';
new rrwebPlayer({
target: document.body,
props: {
events,
showController: false,
},
});
实现自己的控制器 UI 时，你可能需要与 rrweb-player 进行交互。
通过 API 控制 rrweb-player：
// 在播放和暂停间切换
rrwebPlayer.toggle();
// 播放
rrwebPlayer.play();
// 暂停
rrwebPlayer.pause();
// 更新 rrweb-player 宽高
rrwebPlayer.$set({
width: NEW_WIDTH,
height: NEW_HEIGHT,
});
rrwebPlayer.triggerResize();
// 切换否跳过无操作时间
rrwebPlayer.toggleSkipInactive();
// 设置播放速度为 2 倍
rrwebPlayer.setSpeed(2);
// 跳转至播放 3 秒处
rrwebPlayer.goto(3000);
通过监听事件获得 rrweb-player 的状态：
// 当前播放时间
rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
console.log(event.payload);
});
// 当前播放状态
rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
console.log(event.payload);
});
// 当前播放进度
rrwebPlayer.addEventListener('ui-update-progress', (event) => {
console.log(event.payload);
});
基于 Replayer 开发自己的回放器 UI
可以参照 rrweb-player 的方式进行开发。