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>

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,

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) {