自定义回放器

当 Replayer 和 rrweb-player 的 UI 无法满足你的需求时，可以自定义回放 UI。

有以下几种方式：

1. 使用 rrweb-player，并自定义其 CSS。
2. 使用 rrweb-player，并设置 showController: false 来隐藏控制器 UI。在该配置下，你可以实现自己的控制器 UI。
3. 使用 insertStyleRules 选项向回放 iframe 注入一些 CSS。
4. 使用 Replayer 开发全新的回放器 UI。

实现你自己的控制器 UI

使用 rrweb-player 时，可以隐藏它的控制器 UI：

import rrwebPlayer from 'rrweb-player';

new rrwebPlayer({
  target: document.body,
  props: {
    events,
    showController: false,
  },
});

在实现控制器 UI 时，你可能需要与 rrweb-player 进行交互。

以下 API 展示了控制器 UI 的一些常见用法：

// toggle between play and pause
rrwebPlayer.toggle();
// play
rrwebPlayer.play();
// pause
rrwebPlayer.pause();
// update the dimension
rrwebPlayer.$set({
  width: NEW_WIDTH,
  height: NEW_HEIGHT,
});
rrwebPlayer.triggerResize();
// toggle whether to skip the inactive time
rrwebPlayer.toggleSkipInactive();
// set replay speed
rrwebPlayer.setSpeed(2);
// go to some timing
rrwebPlayer.goto(3000);

还有一些方式可以监听 rrweb-player 的状态：

// get current timing
rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
  console.log(event.payload);
});

// get current state
rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
  console.log(event.payload);
});

// get current progress
rrwebPlayer.addEventListener('ui-update-progress', (event) => {
  console.log(event.payload);
});

使用 Replayer 开发全新的回放器 UI

请参考 rrweb-player。