xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Francesco Novy
2023-03-03 13:01:02 +01:00
committed by GitHub
parent 5e6c132a4d
commit eac9b18bbf
5 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/old-dryers-hide.md Normal file
View File

@@ -0,0 +1,5 @@
---
'rrweb-snapshot': minor
---
feat: Ignore `autoplay` attribute on video/audio elements

2
packages/rrweb-snapshot/src/index.ts
View File

@@ -1,6 +1,7 @@
import snapshot, { import snapshot, {
serializeNodeWithId, serializeNodeWithId,
transformAttribute, transformAttribute,
ignoreAttribute,
visitSnapshot, visitSnapshot,
cleanupSnapshot, cleanupSnapshot,
needMaskingText, needMaskingText,
@@ -24,6 +25,7 @@ export {
addHoverClass, addHoverClass,
createCache, createCache,
transformAttribute, transformAttribute,
ignoreAttribute,
visitSnapshot, visitSnapshot,
cleanupSnapshot, cleanupSnapshot,
needMaskingText, needMaskingText,

10
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -255,6 +255,14 @@ export function transformAttribute(
return value; return value;
} }
export function ignoreAttribute(
tagName: string,
name: string,
_value: unknown,
): boolean {
return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
}
export function _isBlockedElement( export function _isBlockedElement(
element: HTMLElement, element: HTMLElement,
blockClass: string | RegExp, blockClass: string | RegExp,
@@ -617,6 +625,7 @@ function serializeElementNode(
const len = n.attributes.length; const len = n.attributes.length;
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
const attr = n.attributes[i]; const attr = n.attributes[i];
if (!ignoreAttribute(tagName, attr.name, attr.value)) {
attributes[attr.name] = transformAttribute( attributes[attr.name] = transformAttribute(
doc, doc,
tagName, tagName,
@@ -624,6 +633,7 @@ function serializeElementNode(
attr.value, attr.value,
); );
} }
}
// remote css // remote css
if (tagName === 'link' && inlineStylesheet) { if (tagName === 'link' && inlineStylesheet) {
const stylesheet = Array.from(doc.styleSheets).find((s) => { const stylesheet = Array.from(doc.styleSheets).find((s) => {

2
packages/rrweb-snapshot/test/html/video.html
View File

@@ -7,7 +7,7 @@
<title>video</title> <title>video</title>
</head> </head>
<body> <body>
<video controls> <video controls autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm <source src=http://techslides.com/demos/sample-videos/small.webm
type=video/webm> <source type=video/webm> <source
src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>

3
packages/rrweb/src/record/mutation.ts
View File

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