From 42c9f536029de1955dc62368856ccd9fc7320bb0 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 1 Apr 2026 12:00:00 +0800 Subject: [PATCH] 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 --- .changeset/old-dryers-hide.md | 5 +++++ packages/rrweb-snapshot/src/index.ts | 2 ++ packages/rrweb-snapshot/src/snapshot.ts | 22 ++++++++++++++------ packages/rrweb-snapshot/test/html/video.html | 2 +- packages/rrweb/src/record/mutation.ts | 3 ++- 5 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 .changeset/old-dryers-hide.md diff --git a/.changeset/old-dryers-hide.md b/.changeset/old-dryers-hide.md new file mode 100644 index 00000000..1b3e3399 --- /dev/null +++ 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 index b2417187..ef9d1b19 100644 --- 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 index 65763b7b..4b88464f 100644 --- 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 index 653f7172..5424ca28 100644 --- a/packages/rrweb-snapshot/test/html/video.html +++ b/packages/rrweb-snapshot/test/html/video.html @@ -7,7 +7,7 @@ video -