feat: support media playbackRate (#1000)

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

packages/rrdom/src/diff.ts

@@ -133,6 +133,8 @@ export function diff(
             oldMediaElement.volume = newMediaRRElement.volume;
           if (newMediaRRElement.currentTime !== undefined)
             oldMediaElement.currentTime = newMediaRRElement.currentTime;
+          if (newMediaRRElement.playbackRate !== undefined)
+            oldMediaElement.playbackRate = newMediaRRElement.playbackRate;
           break;
         }
         case 'CANVAS':

packages/rrdom/src/document.ts

@@ -580,6 +580,7 @@ export function BaseRRMediaElementImpl<
     public volume?: number;
     public paused?: boolean;
     public muted?: boolean;
+    public playbackRate?: number;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     attachShadow(_init: ShadowRootInit): IRRElement {
       throw new Error(

packages/rrdom/test/diff.test.ts

@@ -217,6 +217,7 @@ describe('diff algorithm for rrdom', () => {
         expect(element.currentTime).toEqual(0);
         expect(element.muted).toEqual(false);
         expect(element.paused).toEqual(true);
+        expect(element.playbackRate).toEqual(1);
 
         const rrDocument = new RRDocument();
         const rrMedia = rrDocument.createElement(tagName) as RRMediaElement;
@@ -224,12 +225,14 @@ describe('diff algorithm for rrdom', () => {
         rrMedia.currentTime = 100;
         rrMedia.muted = true;
         rrMedia.paused = false;
+        rrMedia.playbackRate = 0.5;
 
         diff(element, rrMedia, replayer);
         expect(element.volume).toEqual(0.5);
         expect(element.currentTime).toEqual(100);
         expect(element.muted).toEqual(true);
         expect(element.paused).toEqual(false);
+        expect(element.playbackRate).toEqual(0.5);
 
         rrMedia.paused = true;
         diff(element, rrMedia, replayer);

packages/rrdom/test/document.test.ts

@@ -894,6 +894,7 @@ describe('Basic RRDocument implementation', () => {
       expect(node.volume).toBeUndefined();
       expect(node.paused).toBeUndefined();
       expect(node.muted).toBeUndefined();
+      expect(node.playbackRate).toBeUndefined();
       expect(node.play).toBeDefined();
       expect(node.pause).toBeDefined();
       expect(node.toString()).toEqual('VIDEO ');

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;