@amplitude/rrweb-player v2.0.0-alpha.26
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/dist/index.umd.cjs"></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,
)
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
Gold Sponsors 🥇
Silver Sponsors 🥈
Bronze Sponsors 🥉
Backers
Core Team Members
Who's using rrweb?
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
4 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
1 year ago