feat: Ignore autoplay attribute on video/audio elements (#1152)

* feat: Ignore `autoplay` attribute on video/auto elements This element leads to weird issues when replaying, so it's better to strip this out. * add changeset * fix check fix typo * Apply formatting changes --------- Co-authored-by: mydea <mydea@users.noreply.github.com>
rrweb-io · Mar 3, 2023 · eac9b18 · eac9b18
1 parent 5e6c132
commit eac9b18
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/.changeset/old-dryers-hide.md b/.changeset/old-dryers-hide.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': minor
+---
+
+feat: Ignore `autoplay` attribute on video/audio elements
diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts
@@ -1,6 +1,7 @@
 import snapshot, {
   serializeNodeWithId,
   transformAttribute,
+  ignoreAttribute,
   visitSnapshot,
   cleanupSnapshot,
   needMaskingText,
@@ -24,6 +25,7 @@ export {
   addHoverClass,
   createCache,
   transformAttribute,
+  ignoreAttribute,
   visitSnapshot,
   cleanupSnapshot,
   needMaskingText,

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -255,6 +255,14 @@ export function transformAttribute(
   return value;
 }
 
+export function ignoreAttribute(
+  tagName: string,
+  name: string,
+  _value: unknown,
+): boolean {
+  return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
+}
+
 export function _isBlockedElement(
   element: HTMLElement,
   blockClass: string | RegExp,
@@ -617,12 +625,14 @@ function serializeElementNode(
   const len = n.attributes.length;
   for (let i = 0; i < len; i++) {
     const attr = n.attributes[i];
-    attributes[attr.name] = transformAttribute(
-      doc,
-      tagName,
-      attr.name,
-      attr.value,
-    );
+    if (!ignoreAttribute(tagName, attr.name, attr.value)) {
+      attributes[attr.name] = transformAttribute(
+        doc,
+        tagName,
+        attr.name,
+        attr.value,
+      );
+    }
   }
   // remote css
   if (tagName === 'link' && inlineStylesheet) {

diff --git a/packages/rrweb-snapshot/test/html/video.html b/packages/rrweb-snapshot/test/html/video.html
@@ -7,7 +7,7 @@
     <title>video</title>
   </head>
   <body>
-    <video controls>
+    <video controls autoplay>
       <source src=http://techslides.com/demos/sample-videos/small.webm
       type=video/webm> <source
       src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -2,6 +2,7 @@ import {
   serializeNodeWithId,
   transformAttribute,
   IGNORED_NODE,
+  ignoreAttribute,
   isShadowRoot,
   needMaskingText,
   maskInputValue,
@@ -557,7 +558,7 @@ export default class MutationBuffer {
               styleObj[pname] = false; // delete
             }
           }
-        } else {
+        } else if (!ignoreAttribute(target.tagName, m.attributeName!, value)) {
           // overwrite attribute if the mutations was triggered in same time
           item.attributes[m.attributeName!] = transformAttribute(
             this.doc,