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

add media state check

Browse Source
This commit is contained in:
Yanzhen Yu
2020-01-12 18:01:37 +08:00
parent 388ec6c30c
commit a7a3a76af1
4 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/rebuild.ts
View File

@@ -152,6 +152,16 @@ function buildNode(
if (name === 'rr_height') { if (name === 'rr_height') {
(node as HTMLElement).style.height = value; (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; return node;

6
src/snapshot.ts
View File

@@ -253,6 +253,12 @@ function serializeNode(
if (tagName === 'canvas') { if (tagName === 'canvas') {
attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(); 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) { if (needBlock) {
const { width, height } = (n as HTMLElement).getBoundingClientRect(); const { width, height } = (n as HTMLElement).getBoundingClientRect();
attributes.rr_width = `${width}px`; attributes.rr_width = `${width}px`;

15
test/__snapshots__/integration.ts.snap
View File

@@ -197,6 +197,21 @@ exports[`[html file]: picture.html 1`] = `
</body></html>" </body></html>"
`; `;
exports[`[html file]: video.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>video</title>
</head>
<body>
<video controls=\\"\\">
<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\\" />
<source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
</video>
</body></html>"
`;
exports[`[html file]: with-relative-res.html 1`] = ` exports[`[html file]: with-relative-res.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head> "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" /> <meta charset=\\"UTF-8\\" />

19
test/html/video.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>video</title>
</head>
<body>
<video controls>
<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>
<source src=http://techslides.com/demos/sample-videos/small.mp4
type=video/mp4> <source
src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</body>
</html>