Files

Eoghan Murray 2305946aed Umd folder (#1704 )

* Don't allow video autoplay to automatically unfreeze page. If it's a 'real' playback, there should be a mount or a keyboard event which will serve to unfreeze the page. Also add other non-user events to the list (we really should have an `isUserEvent` function)

* Apply formatting changes

* Create a new `umd` folder alongside `dist` for output of UMD files with a plain `.js` instead of `.cjs` extension, as the latter won't be served with the correct mime type by jsdelivr

 - #1687 (just rename `.cjs` to `.js`) was rejected due to the the 'dual package hazard' [1], and produces a warning when run through publint.dev (which was the original motivation for changing to \.cjs)
 - jsdelivr won't be serving `.cjs` with the correct mime type: https://github.com/jsdelivr/jsdelivr/issues/18584

[1] https://nodejs.org/en/learn/modules/publishing-a-package#the-dual-package-hazard

* Update to point to alpha.19 as presumably that's when the umd folder will be available after the changes in this PR

* Apply formatting changes

* Don't try to create the same directory twice (was failing on packages/packer/umd)

* Create thirty-shirts-grow.md

* Revert something that shouldn't have gotten into the UMD branch folder

* Apply formatting changes

* Update vite.config.default.ts

* Apply formatting changes

* build: include umd builds in published packages

Add umd directory to the files array in package.json for all packages to include UMD builds in npm publications. Also update .gitignore to exclude
umd folders from version control.

* Docs: point to correct file

* Remove unused code

* docs: update rrweb cdn urls to umd bundles

Align README and guide examples with published UMD file locations for
rrweb, @rrweb/record, and @rrweb/replay.

Update versioned rrweb script examples from 2.0.0-alpha.19 to
2.0.0-alpha.21 in both English and Chinese guides.

* build(all): include umd folder in package files

---------

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

2026-04-01 12:00:00 +08:00

14 KiB

Raw Blame History

Looking for a Vue.js version? Go here --> @preflight-hq/rrweb-player-vue

rrweb-player

Since rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.

How is this different from `rrweb.Replayer`?

rrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those.

Installation

rrweb-player can also be included with <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/umd/rrweb-player.js"></script>

Or installed by using NPM：

npm install --save rrweb-player

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

Usage

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

Options

key	default	description
events	[]	the events for replaying
width	1024	the width of the replayer
height	576	the height of the replayer
maxScale	1	the maximum scale of the replayer (1 = 100%), set to 0 for unlimited
autoPlay	true	whether to autoplay
speed	1	The default speed to play at
speedOption	[1, 2, 4, 8]	speed options in UI
showController	true	whether to show the controller UI
tags	{}	customize the custom events style with a key-value map
inactiveColor	#D4D4D4	Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.
...	-	all the rrweb Replayer options will be bypassed

methods on the rrwebPlayer component

addEventListener(event: string, handler: (params: any) => unknown): void;

addEvent(event: eventWithTime): void;

getMetaData() => {
    startTime: number;
    endTime: number;
    totalTime: number;
}

getReplayer() => Replayer;

getMirror() => Mirror;

Toggles between play/pause

toggle();

Sets speed of player

setSpeed(speed: number)

Turns on/off skip inactive

toggleSkipInactive();

Triggers resize, do this whenever you change width/height

triggerResize();

Plays replay

play();

Pauses replay

pause();

Go to a point in time and pause or play from then

goto(timeOffset: number, play?: boolean)

Plays from a time to a time and (optionally) loop

playRange(
    timeOffset: number,
    endTimeOffset: number,
    startLooping: boolean = false,
    afterHook: undefined | (() => void) = undefined,
  )