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>
2023-03-03 13:01:02 +01:00
parent 5e6c132a4d
commit eac9b18bbf
5 changed files with 26 additions and 8 deletions
--- 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
--- 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,
--- 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) {
--- 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>
--- 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,