feat: support media playbackRate (#1000)

Co-authored-by: wangfukang <wangfukang@kuaishou.com>

packages/rrweb/src/record/observer.ts

@@ -703,13 +703,19 @@ function initMediaInteractionObserver({
       ) {
         return;
       }
-      const { currentTime, volume, muted } = target as HTMLMediaElement;
+      const {
+        currentTime,
+        volume,
+        muted,
+        playbackRate,
+      } = target as HTMLMediaElement;
       mediaInteractionCb({
         type,
         id: mirror.getId(target as Node),
         currentTime,
         volume,
         muted,
+        playbackRate,
       });
     }, sampling.media || 500);
   const handlers = [
@@ -717,6 +723,7 @@ function initMediaInteractionObserver({
     on('pause', handler(MediaInteractions.Pause)),
     on('seeked', handler(MediaInteractions.Seeked)),
     on('volumechange', handler(MediaInteractions.VolumeChange)),
+    on('ratechange', handler(MediaInteractions.RateChange)),
   ];
   return () => {
     handlers.forEach((h) => h());

packages/rrweb/src/replay/index.ts

@@ -1188,6 +1188,9 @@ export class Replayer {
             // unexpeted behavior
             void mediaEl.play();
           }
+          if (d.type === MediaInteractions.RateChange) {
+            mediaEl.playbackRate = d.playbackRate;
+          }
         } catch (error) {
           if (this.config.showWarning) {
             console.warn(

packages/rrweb/src/types.ts

@@ -611,6 +611,7 @@ export const enum MediaInteractions {
   Pause,
   Seeked,
   VolumeChange,
+  RateChange,
 }
 
 export type mediaInteractionParam = {
@@ -619,6 +620,7 @@ export type mediaInteractionParam = {
   currentTime?: number;
   volume?: number;
   muted?: boolean;
+  playbackRate?: number;
 };
 
 export type mediaInteractionCallback = (p: mediaInteractionParam) => void;