diff --git a/src/rebuild.ts b/src/rebuild.ts index 83510588..4a42d5be 100644 --- a/src/rebuild.ts +++ b/src/rebuild.ts @@ -152,6 +152,16 @@ function buildNode( if (name === 'rr_height') { (node as HTMLElement).style.height = value; } + if (name === 'rr_mediaState') { + switch (value) { + case 'played': + (node as HTMLMediaElement).play(); + case 'paused': + (node as HTMLMediaElement).pause(); + break; + default: + } + } } } return node; diff --git a/src/snapshot.ts b/src/snapshot.ts index 167768f2..69f0577c 100644 --- a/src/snapshot.ts +++ b/src/snapshot.ts @@ -253,6 +253,12 @@ function serializeNode( if (tagName === 'canvas') { attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(); } + // media elements + if (tagName === 'audio' || tagName === 'video') { + attributes.rr_mediaState = (n as HTMLMediaElement).paused + ? 'paused' + : 'played'; + } if (needBlock) { const { width, height } = (n as HTMLElement).getBoundingClientRect(); attributes.rr_width = `${width}px`; diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap index 363fd658..715debc7 100644 --- a/test/__snapshots__/integration.ts.snap +++ b/test/__snapshots__/integration.ts.snap @@ -197,6 +197,21 @@ exports[`[html file]: picture.html 1`] = ` " `; +exports[`[html file]: video.html 1`] = ` +" + + + + video + + + + " +`; + exports[`[html file]: with-relative-res.html 1`] = ` " diff --git a/test/html/video.html b/test/html/video.html new file mode 100644 index 00000000..653f7172 --- /dev/null +++ b/test/html/video.html @@ -0,0 +1,19 @@ + + + + + + + video + + + + +