diff --git a/.changeset/breezy-cats-heal.md b/.changeset/breezy-cats-heal.md
new file mode 100644
index 0000000000..6e1bc2fa46
--- /dev/null
+++ b/.changeset/breezy-cats-heal.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: createImageBitmap throws DOMException if source is 0 width or height
diff --git a/.changeset/cool-grapes-hug.md b/.changeset/cool-grapes-hug.md
new file mode 100644
index 0000000000..cde43b29ff
--- /dev/null
+++ b/.changeset/cool-grapes-hug.md
@@ -0,0 +1,5 @@
+---
+'rrdom': patch
+---
+
+Support `loop` in `RRMediaElement`
diff --git a/.changeset/dirty-rules-dress.md b/.changeset/dirty-rules-dress.md
new file mode 100644
index 0000000000..19b2070ffc
--- /dev/null
+++ b/.changeset/dirty-rules-dress.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': minor
+---
+
+Video and Audio elements now also capture `playbackRate`, `muted`, `loop`, `volume`.
diff --git a/.changeset/event-single-wrap.md b/.changeset/event-single-wrap.md
new file mode 100644
index 0000000000..c659c015ef
--- /dev/null
+++ b/.changeset/event-single-wrap.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+perf: Avoid an extra function call and object clone during event emission
diff --git a/.changeset/light-fireants-exercise.md b/.changeset/light-fireants-exercise.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/light-fireants-exercise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/mighty-ads-worry.md b/.changeset/mighty-ads-worry.md
new file mode 100644
index 0000000000..1906ac8945
--- /dev/null
+++ b/.changeset/mighty-ads-worry.md
@@ -0,0 +1,5 @@
+---
+'rrweb': minor
+---
+
+Full overhawl of `video` and `audio` element playback. More robust and fixes lots of bugs related to pausing/playing/skipping/muting/playbackRate etc.
diff --git a/.changeset/modern-doors-watch.md b/.changeset/modern-doors-watch.md
new file mode 100644
index 0000000000..b74bfbad45
--- /dev/null
+++ b/.changeset/modern-doors-watch.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': patch
+---
+
+better nested css selector splitting when commas or brackets happen to be in quoted text
diff --git a/.changeset/pre.json b/.changeset/pre.json
index 067c4ae386..f752b6ec00 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -14,64 +14,101 @@
   "changesets": [
     "attribute-text-reductions",
     "brave-numbers-joke",
+    "breezy-cats-heal",
+    "breezy-mice-breathe",
     "calm-bulldogs-speak",
+    "calm-oranges-sin",
     "chatty-cherries-train",
     "clean-plants-play",
     "clean-shrimps-lay",
     "cold-eyes-hunt",
+    "cold-hounds-teach",
     "controller-finish-flag",
+    "cool-grapes-hug",
+    "cuddly-readers-warn",
     "curvy-apples-lay",
     "date-now-guard",
+    "dirty-rules-dress",
     "eight-terms-hunt",
     "empty-bikes-cheer",
     "fair-dragons-greet",
     "fast-chefs-smell",
+    "few-rockets-travel",
     "few-turkeys-reflect",
     "five-peas-lay",
+    "fluffy-planes-retire",
     "forty-elephants-attack",
     "fresh-cars-impress",
     "fresh-spoons-drive",
+    "friendly-numbers-leave",
+    "gold-apples-joke",
     "gold-terms-look",
     "grumpy-ways-own",
+    "hip-worms-relax",
     "itchy-dryers-double",
     "khaki-dots-bathe",
     "large-ants-prove",
+    "lazy-squids-draw",
     "lazy-toes-confess",
+    "lemon-lamps-switch",
+    "light-fireants-exercise",
     "little-radios-thank",
     "little-suits-leave",
     "loud-seals-raise",
     "lovely-pears-cross",
     "lovely-students-boil",
     "mean-tips-impress",
+    "mighty-ads-worry",
+    "mighty-bulldogs-begin",
     "mighty-frogs-sparkle",
+    "moody-dots-refuse",
     "nervous-buses-pump",
+    "nervous-mirrors-perform",
     "nervous-poets-grin",
     "nervous-tables-travel",
     "new-snakes-call",
     "nice-pugs-reply",
     "old-dryers-hide",
+    "polite-olives-wave",
     "pretty-plums-rescue",
     "pretty-schools-remember",
     "proud-experts-jam",
+    "rare-adults-sneeze",
     "real-masks-explode",
     "real-trains-switch",
     "rich-crews-protect",
+    "rich-dots-lay",
     "rich-jars-remember",
+    "rotten-spies-enjoy",
     "serious-ants-juggle",
+    "silver-pots-sit",
+    "silver-windows-float",
     "sixty-impalas-laugh",
     "small-olives-arrive",
+    "smart-ears-refuse",
+    "smart-geckos-cover",
+    "smooth-papayas-boil",
     "smooth-poems-bake",
+    "spotty-bees-destroy",
     "stupid-ghosts-help",
+    "swift-dancers-rest",
     "swift-peas-film",
+    "thin-vans-applaud",
     "thirty-baboons-punch",
+    "three-baboons-bow",
+    "tidy-swans-repair",
     "tidy-yaks-joke",
     "tiny-buckets-love",
+    "tiny-candles-whisper",
     "tiny-chairs-build",
     "tricky-panthers-guess",
+    "twenty-goats-kneel",
     "twenty-lies-switch",
     "twenty-planets-repeat",
     "violet-melons-itch",
     "violet-zebras-cry",
+    "wise-spiders-jog",
+    "witty-kids-talk",
     "yellow-mails-cheat",
     "young-timers-grow"
   ]
diff --git a/.changeset/rich-dots-lay.md b/.changeset/rich-dots-lay.md
new file mode 100644
index 0000000000..ba889e446e
--- /dev/null
+++ b/.changeset/rich-dots-lay.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': patch
+---
+
+Fix css parsing errors
diff --git a/.changeset/rotten-spies-enjoy.md b/.changeset/rotten-spies-enjoy.md
new file mode 100644
index 0000000000..5f5954fcac
--- /dev/null
+++ b/.changeset/rotten-spies-enjoy.md
@@ -0,0 +1,7 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Ensure :hover works on replayer, even if a rule is behind a media query
+Respect the intent behind max-device-width and min-device-width media queries so that their effects are apparent in the replayer context
diff --git a/.changeset/safe-pause.md b/.changeset/safe-pause.md
new file mode 100644
index 0000000000..9422916855
--- /dev/null
+++ b/.changeset/safe-pause.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: safe pause
diff --git a/.changeset/silver-pots-sit.md b/.changeset/silver-pots-sit.md
new file mode 100644
index 0000000000..b53a943825
--- /dev/null
+++ b/.changeset/silver-pots-sit.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/types': patch
+---
+
+Add `loop` to `mediaInteractionParam`
diff --git a/.changeset/smart-geckos-cover.md b/.changeset/smart-geckos-cover.md
new file mode 100644
index 0000000000..a5a0e0f44c
--- /dev/null
+++ b/.changeset/smart-geckos-cover.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Record `loop` on `<audio>` & `<video>` elements.
diff --git a/.changeset/three-baboons-bow.md b/.changeset/three-baboons-bow.md
new file mode 100644
index 0000000000..4e419cc2bc
--- /dev/null
+++ b/.changeset/three-baboons-bow.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: protect against missing parentNode
diff --git a/.changeset/twenty-goats-kneel.md b/.changeset/twenty-goats-kneel.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/twenty-goats-kneel.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/wise-spiders-jog.md b/.changeset/wise-spiders-jog.md
new file mode 100644
index 0000000000..6bfa0b580a
--- /dev/null
+++ b/.changeset/wise-spiders-jog.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/types': patch
+---
+
+Fix type error when using `"moduleResolution": "NodeNext"`.
diff --git a/README.md b/README.md
index 0d518df6f1..dc2ffef021 100644
--- a/README.md
+++ b/README.md
@@ -242,5 +242,10 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
         <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
       </a>
     </td>
+    <td align="center">
+      <a href="https://www.howdygo.com" target="_blank">
+        <img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
+      </a>
+    </td>
   </tr>
 </table>
diff --git a/guide.md b/guide.md
index d7807bf00d..5693b26d29 100644
--- a/guide.md
+++ b/guide.md
@@ -295,26 +295,27 @@ replayer.destroy();
 
 The replayer accepts options as its constructor's second parameter, and it has the following options:
 
-| key                 | default       | description                                                                                                                                                                                                                    |
-| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| speed               | 1             | replay speed ratio                                                                                                                                                                                                             |
-| root                | document.body | the root element of replayer                                                                                                                                                                                                   |
-| loadTimeout         | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
-| skipInactive        | false         | whether to skip inactive time                                                                                                                                                                                                  |
-| showWarning         | true          | whether to print warning messages during replay                                                                                                                                                                                |
-| showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
-| blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
-| liveMode            | false         | whether to enable live mode                                                                                                                                                                                                    |
-| insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
-| triggerFocus        | true          | whether to trigger focus during replay                                                                                                                                                                                         |
-| UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
-| pauseAnimation      | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
-| mouseTail           | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn            | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
-| logConfig           | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
-| plugins             | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
-| useVirtualDom       | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
-| logger              | console       | The logger object used by the replayer to print warnings or errors                                                                                                                                                             |
+| key                     | default       | description                                                                                                                                                                                                                    |
+| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| speed                   | 1             | replay speed ratio                                                                                                                                                                                                             |
+| root                    | document.body | the root element of replayer                                                                                                                                                                                                   |
+| loadTimeout             | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
+| skipInactive            | false         | whether to skip inactive time                                                                                                                                                                                                  |
+| inactivePeriodThreshold | 10000         | the threshold in milliseconds for what should be considered an inactive period                                                                                                                                                 |
+| showWarning             | true          | whether to print warning messages during replay                                                                                                                                                                                |
+| showDebug               | false         | whether to print debug messages during replay                                                                                                                                                                                  |
+| blockClass              | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
+| liveMode                | false         | whether to enable live mode                                                                                                                                                                                                    |
+| insertStyleRules        | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
+| triggerFocus            | true          | whether to trigger focus during replay                                                                                                                                                                                         |
+| UNSAFE_replayCanvas     | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
+| pauseAnimation          | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
+| mouseTail               | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
+| unpackFn                | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
+| logConfig               | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
+| plugins                 | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
+| useVirtualDom           | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
+| logger                  | console       | The logger object used by the replayer to print warnings or errors                                                                                                                                                             |
 
 #### Use rrweb-player
 
diff --git a/packages/rrdom-nodejs/CHANGELOG.md b/packages/rrdom-nodejs/CHANGELOG.md
index 644746d893..3e550009cb 100644
--- a/packages/rrdom-nodejs/CHANGELOG.md
+++ b/packages/rrdom-nodejs/CHANGELOG.md
@@ -1,5 +1,21 @@
 # rrdom-nodejs
 
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356)]:
+  - rrdom@2.0.0-alpha.13
+  - rrweb-snapshot@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- Updated dependencies [[`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f), [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8), [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b), [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81), [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817), [`e607e83`](https://github.com/rrweb-io/rrweb/commit/e607e83b21d45131a56c1ff606e9519a5b475fc1), [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882), [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e)]:
+  - rrweb-snapshot@2.0.0-alpha.12
+  - rrdom@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
index 58aad4a681..09a69a7ffd 100644
--- a/packages/rrdom-nodejs/package.json
+++ b/packages/rrdom-nodejs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrdom-nodejs",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -48,8 +48,8 @@
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0",
-    "rrdom": "^2.0.0-alpha.11",
-    "rrweb-snapshot": "^2.0.0-alpha.11"
+    "rrdom": "^2.0.0-alpha.13",
+    "rrweb-snapshot": "^2.0.0-alpha.13"
   },
   "browserslist": [
     "supports es6-class"
diff --git a/packages/rrdom/CHANGELOG.md b/packages/rrdom/CHANGELOG.md
index 656122115a..aa73fc9c4a 100644
--- a/packages/rrdom/CHANGELOG.md
+++ b/packages/rrdom/CHANGELOG.md
@@ -1,5 +1,23 @@
 # rrdom
 
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- [#1432](https://github.com/rrweb-io/rrweb/pull/1432) [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961) Thanks [@Juice10](https://github.com/Juice10)! - Support `loop` in `RRMediaElement`
+
+- Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356)]:
+  - rrweb-snapshot@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- [#1352](https://github.com/rrweb-io/rrweb/pull/1352) [`e607e83`](https://github.com/rrweb-io/rrweb/commit/e607e83b21d45131a56c1ff606e9519a5b475fc1) Thanks [@juliecheng](https://github.com/juliecheng)! - fix: scrolling may not be applied when fast-forwarding
+
+- Updated dependencies [[`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f), [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8), [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b), [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81), [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817), [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882), [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e)]:
+  - rrweb-snapshot@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
index f7122da917..430620782c 100644
--- a/packages/rrdom/package.json
+++ b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrdom",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme",
   "license": "MIT",
   "main": "lib/rrdom.cjs",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
-    "@rrweb/types": "^2.0.0-alpha.11",
+    "@rrweb/types": "^2.0.0-alpha.13",
     "@types/jest": "^27.4.1",
     "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -47,6 +47,6 @@
     "ts-jest": "^27.1.3"
   },
   "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.11"
+    "rrweb-snapshot": "^2.0.0-alpha.13"
   }
 }
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
index 05dc0f2218..8ccf81f8c6 100644
--- a/packages/rrdom/src/diff.ts
+++ b/packages/rrdom/src/diff.ts
@@ -250,6 +250,8 @@ function diffAfterUpdatingChildren(
             oldMediaElement.currentTime = newMediaRRElement.currentTime;
           if (newMediaRRElement.playbackRate !== undefined)
             oldMediaElement.playbackRate = newMediaRRElement.playbackRate;
+          if (newMediaRRElement.loop !== undefined)
+            oldMediaElement.loop = newMediaRRElement.loop;
           break;
         }
         case 'CANVAS': {
diff --git a/packages/rrdom/src/document.ts b/packages/rrdom/src/document.ts
index a053009a76..befdadb86d 100644
--- a/packages/rrdom/src/document.ts
+++ b/packages/rrdom/src/document.ts
@@ -563,6 +563,7 @@ export function BaseRRMediaElementImpl<
     public paused?: boolean;
     public muted?: boolean;
     public playbackRate?: number;
+    public loop?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     attachShadow(_init: ShadowRootInit): IRRElement {
       throw new Error(
diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts
index 3f18a6ee7e..fc76f48bd9 100644
--- a/packages/rrdom/test/diff.test.ts
+++ b/packages/rrdom/test/diff.test.ts
@@ -280,6 +280,7 @@ describe('diff algorithm for rrdom', () => {
         rrMedia.muted = true;
         rrMedia.paused = false;
         rrMedia.playbackRate = 0.5;
+        rrMedia.loop = false;
 
         diff(element, rrMedia, replayer);
         expect(element.volume).toEqual(0.5);
@@ -287,6 +288,7 @@ describe('diff algorithm for rrdom', () => {
         expect(element.muted).toEqual(true);
         expect(element.paused).toEqual(false);
         expect(element.playbackRate).toEqual(0.5);
+        expect(element.loop).toEqual(false);
 
         rrMedia.paused = true;
         diff(element, rrMedia, replayer);
diff --git a/packages/rrdom/test/document.test.ts b/packages/rrdom/test/document.test.ts
index 38a35e505f..ad3b02134e 100644
--- a/packages/rrdom/test/document.test.ts
+++ b/packages/rrdom/test/document.test.ts
@@ -1079,6 +1079,7 @@ describe('Basic RRDocument implementation', () => {
       expect(node.paused).toBeUndefined();
       expect(node.muted).toBeUndefined();
       expect(node.playbackRate).toBeUndefined();
+      expect(node.loop).toBeUndefined();
       expect(node.play).toBeDefined();
       expect(node.pause).toBeDefined();
       expect(node.toString()).toEqual('VIDEO ');
diff --git a/packages/rrvideo/CHANGELOG.md b/packages/rrvideo/CHANGELOG.md
index d0a3168f9c..46339afe44 100644
--- a/packages/rrvideo/CHANGELOG.md
+++ b/packages/rrvideo/CHANGELOG.md
@@ -1,5 +1,19 @@
 # rrvideo
 
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- Updated dependencies []:
+  - rrweb-player@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - rrweb-player@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json
index 5472c8981a..4cbd92463d 100644
--- a/packages/rrvideo/package.json
+++ b/packages/rrvideo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrvideo",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "description": "transform rrweb session into video",
   "main": "build/index.js",
   "bin": {
@@ -26,13 +26,13 @@
     "@types/node": "^18.15.11",
     "jest": "^27.5.1",
     "ts-jest": "^27.1.3",
-    "@rrweb/types": "^2.0.0-alpha.11"
+    "@rrweb/types": "^2.0.0-alpha.13"
   },
   "dependencies": {
     "@open-tech-world/cli-progress-bar": "^2.0.2",
     "fs-extra": "^11.1.1",
     "minimist": "^1.2.5",
     "playwright": "^1.32.1",
-    "rrweb-player": "^2.0.0-alpha.11"
+    "rrweb-player": "^2.0.0-alpha.13"
   }
 }
diff --git a/packages/rrweb-player/CHANGELOG.md b/packages/rrweb-player/CHANGELOG.md
index 0743a3a1d3..31485fea43 100644
--- a/packages/rrweb-player/CHANGELOG.md
+++ b/packages/rrweb-player/CHANGELOG.md
@@ -1,5 +1,19 @@
 # rrweb-player
 
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- Updated dependencies [[`3d1877c`](https://github.com/rrweb-io/rrweb/commit/3d1877cff83d9a018630674fb6e730050ceef812), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`02f50d2`](https://github.com/rrweb-io/rrweb/commit/02f50d260cfe72209c94de1679336737f238e216)]:
+  - rrweb@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- Updated dependencies [[`af0962c`](https://github.com/rrweb-io/rrweb/commit/af0962cc6c80b693bbc622520032d17342685cf6), [`57a940a`](https://github.com/rrweb-io/rrweb/commit/57a940afac0bdd14cd82937915d53110b5311673), [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81), [`9c6edfe`](https://github.com/rrweb-io/rrweb/commit/9c6edfe2261680b4e92284be69f9d183b1eca8f4), [`1e0b273`](https://github.com/rrweb-io/rrweb/commit/1e0b27382210db0168d2a79d82c13698082b0983), [`1fe39ab`](https://github.com/rrweb-io/rrweb/commit/1fe39ab0db7f5d2b04f4a4f39fb5c0cfee33a1f8), [`05478c3`](https://github.com/rrweb-io/rrweb/commit/05478c36dde03a118099783d908bb3e465e9859c), [`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f), [`980a38c`](https://github.com/rrweb-io/rrweb/commit/980a38c816d763833fc3491f56d03c959a41122d), [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8), [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b), [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817), [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882), [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e)]:
+  - rrweb@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index f545256267..da8cba206a 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,10 +1,10 @@
 {
   "name": "rrweb-player",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rrweb/types": "^2.0.0-alpha.11",
+    "@rrweb/types": "^2.0.0-alpha.13",
     "@types/offscreencanvas": "^2019.6.4",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^2.0.0-alpha.11"
+    "rrweb": "^2.0.0-alpha.13"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index 5a352e6dd0..7e49df841e 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -114,7 +114,7 @@
       const totalEvents = context.events.length;
       const start = context.events[0].timestamp;
       const end = context.events[totalEvents - 1].timestamp;
-      const periods = getInactivePeriods(context.events);
+      const periods = getInactivePeriods(context.events, replayer.config.inactivePeriodThreshold);
       // calculate the indicator width.
       const getWidth = (
         startTime: number,
diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts
index 2a3f29219c..08146bd253 100644
--- a/packages/rrweb-player/src/utils.ts
+++ b/packages/rrweb-player/src/utils.ts
@@ -161,20 +161,21 @@ function isUserInteraction(event: eventWithTime): boolean {
   );
 }
 
-// Forked from 'rrweb' replay/index.ts. A const threshold of inactive time.
-const SKIP_TIME_THRESHOLD = 10 * 1000;
-
 /**
  * Get periods of time when no user interaction happened from a list of events.
  * @param events - all events
+ * @param inactivePeriodThreshold - threshold of inactive time in milliseconds
  * @returns periods of time consist with [start time, end time]
  */
-export function getInactivePeriods(events: eventWithTime[]) {
+export function getInactivePeriods(
+  events: eventWithTime[],
+  inactivePeriodThreshold: number,
+) {
   const inactivePeriods: [number, number][] = [];
   let lastActiveTime = events[0].timestamp;
   for (const event of events) {
     if (!isUserInteraction(event)) continue;
-    if (event.timestamp - lastActiveTime > SKIP_TIME_THRESHOLD) {
+    if (event.timestamp - lastActiveTime > inactivePeriodThreshold) {
       inactivePeriods.push([lastActiveTime, event.timestamp]);
     }
     lastActiveTime = event.timestamp;
diff --git a/packages/rrweb-snapshot/CHANGELOG.md b/packages/rrweb-snapshot/CHANGELOG.md
index 3051b02caf..a04e46b87f 100644
--- a/packages/rrweb-snapshot/CHANGELOG.md
+++ b/packages/rrweb-snapshot/CHANGELOG.md
@@ -1,5 +1,38 @@
 # rrweb-snapshot
 
+## 2.0.0-alpha.13
+
+### Minor Changes
+
+- [#1432](https://github.com/rrweb-io/rrweb/pull/1432) [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961) Thanks [@Juice10](https://github.com/Juice10)! - Video and Audio elements now also capture `playbackRate`, `muted`, `loop`, `volume`.
+
+### Patch Changes
+
+- [#1401](https://github.com/rrweb-io/rrweb/pull/1401) [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356) Thanks [@dengelke](https://github.com/dengelke)! - Fix css parsing errors
+
+## 2.0.0-alpha.12
+
+### Minor Changes
+
+- [#1310](https://github.com/rrweb-io/rrweb/pull/1310) [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882) Thanks [@benjackwhite](https://github.com/benjackwhite)! - Extends maskTextFn to pass the HTMLElement to the deciding function
+
+### Patch Changes
+
+- [#1272](https://github.com/rrweb-io/rrweb/pull/1272) [`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Perf: Avoid creation of intermediary array when iterating over style rules
+
+- [#1351](https://github.com/rrweb-io/rrweb/pull/1351) [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Don't double-record the values of <textarea>s when they already have some content prefilled #1301
+
+- [#1431](https://github.com/rrweb-io/rrweb/pull/1431) [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Ensure :hover works on replayer, even if a rule is behind a media query
+  Respect the intent behind max-device-width and min-device-width media queries so that their effects are apparent in the replayer context
+
+- [#1155](https://github.com/rrweb-io/rrweb/pull/1155) [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81) Thanks [@YunFeng0817](https://github.com/YunFeng0817)! - Feat: Add 'isCustom' flag to serialized elements.
+
+  This flag is used to indicate whether the element is a custom element or not. This is useful for replaying the :defined pseudo-class of custom elements.
+
+- [#1374](https://github.com/rrweb-io/rrweb/pull/1374) [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817) Thanks [@andrewpomeroy](https://github.com/andrewpomeroy)! - Capture stylesheets designated as `rel="preload"`
+
+- [#1349](https://github.com/rrweb-io/rrweb/pull/1349) [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Snapshot performance when masking text: Avoid the repeated calls to `closest` when recursing through the DOM
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index a179f36564..14eb0fe0d9 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
index d7a413eb67..1a3157d40f 100644
--- a/packages/rrweb-snapshot/src/css.ts
+++ b/packages/rrweb-snapshot/src/css.ts
@@ -56,6 +56,11 @@ export interface Node {
   };
 }
 
+export interface NodeWithRules extends Node {
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules: Array<Rule | Comment | AtRule>;
+}
+
 export interface Rule extends Node {
   /** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */
   selectors?: string[];
@@ -98,13 +103,11 @@ export interface CustomMedia extends Node {
 /**
  * The @document at-rule.
  */
-export interface Document extends Node {
+export interface Document extends NodeWithRules {
   /** The part following @document. */
   document?: string;
   /** The vendor prefix in @document, or undefined if there is none. */
   vendor?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
 }
 
 /**
@@ -118,10 +121,7 @@ export interface FontFace extends Node {
 /**
  * The @host at-rule.
  */
-export interface Host extends Node {
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
-}
+export type Host = NodeWithRules;
 
 /**
  * The @import at-rule.
@@ -153,11 +153,9 @@ export interface KeyFrame extends Node {
 /**
  * The @media at-rule.
  */
-export interface Media extends Node {
+export interface Media extends NodeWithRules {
   /** The part following @media. */
   media?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
 }
 
 /**
@@ -181,11 +179,9 @@ export interface Page extends Node {
 /**
  * The @supports at-rule.
  */
-export interface Supports extends Node {
+export interface Supports extends NodeWithRules {
   /** The part following @supports. */
   supports?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
 }
 
 /** All at-rules. */
@@ -205,10 +201,8 @@ export type AtRule =
 /**
  * A collection of rules
  */
-export interface StyleRules {
+export interface StyleRules extends NodeWithRules {
   source?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules: Array<Rule | Comment | AtRule>;
   /** Array of Errors. Errors collected during parsing when option silent is true. */
   parsingErrors?: ParserError[];
 }
@@ -224,7 +218,7 @@ export interface Stylesheet extends Node {
 // https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
 const commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
 
-export function parse(css: string, options: ParserOptions = {}) {
+export function parse(css: string, options: ParserOptions = {}): Stylesheet {
   /**
    * Positional.
    */
@@ -431,21 +425,81 @@ export function parse(css: string, options: ParserOptions = {}) {
    */
 
   function selector() {
-    const m = match(/^([^{]+)/);
+    whitespace();
+    while (css[0] == '}') {
+      error('extra closing bracket');
+      css = css.slice(1);
+      whitespace();
+    }
+
+    // Use match logic from https://github.com/NxtChg/pieces/blob/3eb39c8287a97632e9347a24f333d52d916bc816/js/css_parser/css_parse.js#L46C1-L47C1
+    const m = match(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);
     if (!m) {
       return;
     }
+
     /* @fix Remove all comments from selectors
      * http://ostermiller.org/findcomment.html */
-    return trim(m[0])
+    const cleanedInput = m[0]
+      .trim()
       .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
+
+      // Handle strings by replacing commas inside them
       .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
         return m.replace(/,/g, '\u200C');
-      })
-      .split(/\s*(?![^(]*\)),\s*/)
-      .map((s) => {
-        return s.replace(/\u200C/g, ',');
       });
+
+    // Split using a custom function and restore commas in strings
+    return customSplit(cleanedInput).map((s) =>
+      s.replace(/\u200C/g, ',').trim(),
+    );
+  }
+
+  /**
+   * Split selector correctly, ensuring not to split on comma if inside ().
+   */
+
+  function customSplit(input: string) {
+    const result = [];
+    let currentSegment = '';
+    let depthParentheses = 0; // Track depth of parentheses
+    let depthBrackets = 0; // Track depth of square brackets
+    let currentStringChar = null;
+
+    for (const char of input) {
+      const hasStringEscape = currentSegment.endsWith('\\');
+
+      if (currentStringChar) {
+        if (currentStringChar === char && !hasStringEscape) {
+          currentStringChar = null;
+        }
+      } else if (char === '(') {
+        depthParentheses++;
+      } else if (char === ')') {
+        depthParentheses--;
+      } else if (char === '[') {
+        depthBrackets++;
+      } else if (char === ']') {
+        depthBrackets--;
+      } else if ('\'"'.includes(char)) {
+        currentStringChar = char;
+      }
+
+      // Split point is a comma that is not inside parentheses or square brackets
+      if (char === ',' && depthParentheses === 0 && depthBrackets === 0) {
+        result.push(currentSegment);
+        currentSegment = '';
+      } else {
+        currentSegment += char;
+      }
+    }
+
+    // Add the last segment
+    if (currentSegment) {
+      result.push(currentSegment);
+    }
+
+    return result;
   }
 
   /**
@@ -882,7 +936,7 @@ function trim(str: string) {
  * Adds non-enumerable parent node reference to each node.
  */
 
-function addParent(obj: Stylesheet, parent?: Stylesheet) {
+function addParent(obj: Stylesheet, parent?: Stylesheet): Stylesheet {
   const isNode = obj && typeof obj.type === 'string';
   const childParent = isNode ? obj : parent;
 
diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts
index ef9d1b19fa..c9f91a9100 100644
--- a/packages/rrweb-snapshot/src/index.ts
+++ b/packages/rrweb-snapshot/src/index.ts
@@ -11,7 +11,7 @@ import snapshot, {
 } from './snapshot';
 import rebuild, {
   buildNodeWithSN,
-  addHoverClass,
+  adaptCssForReplay,
   createCache,
 } from './rebuild';
 export * from './types';
@@ -22,7 +22,7 @@ export {
   serializeNodeWithId,
   rebuild,
   buildNodeWithSN,
-  addHoverClass,
+  adaptCssForReplay,
   createCache,
   transformAttribute,
   ignoreAttribute,
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 10bf067a76..7c6ed948e6 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -1,4 +1,4 @@
-import { parse } from './css';
+import { Rule, Media, NodeWithRules, parse } from './css';
 import {
   serializedNodeWithId,
   NodeType,
@@ -62,9 +62,11 @@ function escapeRegExp(str: string) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
+const MEDIA_SELECTOR = /(max|min)-device-(width|height)/;
+const MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, 'g');
 const HOVER_SELECTOR = /([^\\]):hover/;
 const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g');
-export function addHoverClass(cssText: string, cache: BuildCache): string {
+export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
   const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
 
@@ -77,35 +79,61 @@ export function addHoverClass(cssText: string, cache: BuildCache): string {
   }
 
   const selectors: string[] = [];
-  ast.stylesheet.rules.forEach((rule) => {
-    if ('selectors' in rule) {
-      (rule.selectors || []).forEach((selector: string) => {
+  const medias: string[] = [];
+  function getSelectors(rule: Rule | Media | NodeWithRules) {
+    if ('selectors' in rule && rule.selectors) {
+      rule.selectors.forEach((selector: string) => {
         if (HOVER_SELECTOR.test(selector)) {
           selectors.push(selector);
         }
       });
     }
-  });
-
-  if (selectors.length === 0) {
-    return cssText;
+    if ('media' in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) {
+      medias.push(rule.media);
+    }
+    if ('rules' in rule && rule.rules) {
+      rule.rules.forEach(getSelectors);
+    }
   }
+  getSelectors(ast.stylesheet);
 
-  const selectorMatcher = new RegExp(
-    selectors
-      .filter((selector, index) => selectors.indexOf(selector) === index)
-      .sort((a, b) => b.length - a.length)
-      .map((selector) => {
-        return escapeRegExp(selector);
-      })
-      .join('|'),
-    'g',
-  );
-
-  const result = cssText.replace(selectorMatcher, (selector) => {
-    const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover');
-    return `${selector}, ${newSelector}`;
-  });
+  let result = cssText;
+  if (selectors.length > 0) {
+    const selectorMatcher = new RegExp(
+      selectors
+        .filter((selector, index) => selectors.indexOf(selector) === index)
+        .sort((a, b) => b.length - a.length)
+        .map((selector) => {
+          return escapeRegExp(selector);
+        })
+        .join('|'),
+      'g',
+    );
+    result = result.replace(selectorMatcher, (selector) => {
+      const newSelector = selector.replace(
+        HOVER_SELECTOR_GLOBAL,
+        '$1.\\:hover',
+      );
+      return `${selector}, ${newSelector}`;
+    });
+  }
+  if (medias.length > 0) {
+    const mediaMatcher = new RegExp(
+      medias
+        .filter((media, index) => medias.indexOf(media) === index)
+        .sort((a, b) => b.length - a.length)
+        .map((media) => {
+          return escapeRegExp(media);
+        })
+        .join('|'),
+      'g',
+    );
+    result = result.replace(mediaMatcher, (media) => {
+      // not attempting to maintain min-device-width along with min-width
+      // (it's non standard)
+      return media.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2');
+    });
+  }
   cache?.stylesWithHoverClass.set(cssText, result);
   return result;
 }
@@ -196,7 +224,7 @@ function buildNode(
         const isTextarea = tagName === 'textarea' && name === 'value';
         const isRemoteOrDynamicCss = tagName === 'style' && name === '_cssText';
         if (isRemoteOrDynamicCss && hackCss && typeof value === 'string') {
-          value = addHoverClass(value, cache);
+          value = adaptCssForReplay(value, cache);
         }
         if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') {
           node.appendChild(doc.createTextNode(value));
@@ -314,6 +342,17 @@ function buildNode(
               break;
             default:
           }
+        } else if (
+          name === 'rr_mediaPlaybackRate' &&
+          typeof value === 'number'
+        ) {
+          (node as HTMLMediaElement).playbackRate = value;
+        } else if (name === 'rr_mediaMuted' && typeof value === 'boolean') {
+          (node as HTMLMediaElement).muted = value;
+        } else if (name === 'rr_mediaLoop' && typeof value === 'boolean') {
+          (node as HTMLMediaElement).loop = value;
+        } else if (name === 'rr_mediaVolume' && typeof value === 'number') {
+          (node as HTMLMediaElement).volume = value;
         }
       }
 
@@ -341,7 +380,7 @@ function buildNode(
     case NodeType.Text:
       return doc.createTextNode(
         n.isStyle && hackCss
-          ? addHoverClass(n.textContent, cache)
+          ? adaptCssForReplay(n.textContent, cache)
           : n.textContent,
       );
     case NodeType.CDATA:
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 75fd863e0b..d323e1af8c 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -12,6 +12,7 @@ import {
   ICanvas,
   elementNode,
   serializedElementNodeWithId,
+  type mediaAttributes,
 } from './types';
 import {
   Mirror,
@@ -761,10 +762,15 @@ function serializeElementNode(
   }
   // media elements
   if (tagName === 'audio' || tagName === 'video') {
-    attributes.rr_mediaState = (n as HTMLMediaElement).paused
+    const mediaAttributes = attributes as mediaAttributes;
+    mediaAttributes.rr_mediaState = (n as HTMLMediaElement).paused
       ? 'paused'
       : 'played';
-    attributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime;
+    mediaAttributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime;
+    mediaAttributes.rr_mediaPlaybackRate = (n as HTMLMediaElement).playbackRate;
+    mediaAttributes.rr_mediaMuted = (n as HTMLMediaElement).muted;
+    mediaAttributes.rr_mediaLoop = (n as HTMLMediaElement).loop;
+    mediaAttributes.rr_mediaVolume = (n as HTMLMediaElement).volume;
   }
   // Scroll
   if (!newlyAddedElement) {
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index 90d31c171a..1abfe4d6c0 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -82,6 +82,27 @@ export type tagMap = {
   [key: string]: string;
 };
 
+export type mediaAttributes = {
+  rr_mediaState: 'played' | 'paused';
+  rr_mediaCurrentTime: number;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaPlaybackRate?: number;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaMuted?: boolean;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaLoop?: boolean;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaVolume?: number;
+};
+
 // @deprecated
 export interface INode extends Node {
   __sn: serializedNodeWithId;
diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
index 2818386071..6f10f6e569 100644
--- a/packages/rrweb-snapshot/test/css.test.ts
+++ b/packages/rrweb-snapshot/test/css.test.ts
@@ -78,6 +78,35 @@ describe('css parser', () => {
     expect(errors[0].filename).toEqual('foo.css');
   });
 
+  it('should parse selector with comma nested inside ()', () => {
+    const result = parse(
+      '[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) { border-color: rgb(84, 84, 84); }',
+    );
+
+    expect(result.parent).toEqual(null);
+
+    const rules = result.stylesheet!.rules;
+    expect(rules.length).toEqual(1);
+
+    let rule = rules[0] as Rule;
+    expect(rule.parent).toEqual(result);
+    expect(rule.selectors?.length).toEqual(1);
+
+    let decl = rule.declarations![0];
+    expect(decl.parent).toEqual(rule);
+  });
+
+  it('parses { and } in attribute selectors correctly', () => {
+    const result = parse('foo[someAttr~="{someId}"] { color: red; }');
+    const rules = result.stylesheet!.rules;
+
+    expect(rules.length).toEqual(1);
+
+    const rule = rules[0] as Rule;
+
+    expect(rule.selectors![0]).toEqual('foo[someAttr~="{someId}"]');
+  });
+
   it('should set parent property', () => {
     const result = parse(
       'thing { test: value; }\n' +
@@ -119,6 +148,50 @@ describe('css parser', () => {
     expect(out3).toEqual('[data-aa\\:other] { color: red; }');
   });
 
+  it('parses nested commas in selectors correctly', () => {
+    const result = parse(
+      `
+body > ul :is(li:not(:first-of-type) a:hover, li:not(:first-of-type).active a) {
+  background: red;
+}
+`,
+    );
+    expect((result.stylesheet!.rules[0] as Rule)!.selectors!.length).toEqual(1);
+
+    const trickresult = parse(
+      `
+li[attr="weirdly("] a:hover, li[attr="weirdly)"] a {
+  background-color: red;
+}
+`,
+    );
+    expect(
+      (trickresult.stylesheet!.rules[0] as Rule)!.selectors!.length,
+    ).toEqual(2);
+
+    const weirderresult = parse(
+      `
+li[attr="weirder\\"("] a:hover, li[attr="weirder\\")"] a {
+  background-color: red;
+}
+`,
+    );
+    expect(
+      (weirderresult.stylesheet!.rules[0] as Rule)!.selectors!.length,
+    ).toEqual(2);
+
+    const commainstrresult = parse(
+      `
+li[attr="has,comma"] a:hover {
+  background-color: red;
+}
+`,
+    );
+    expect(
+      (commainstrresult.stylesheet!.rules[0] as Rule)!.selectors!.length,
+    ).toEqual(1);
+  });
+
   it('parses imports with quotes correctly', () => {
     const out1 = escapeImportStatement({
       cssText: `@import url("/foo.css;900;800"");`,
diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
index 357cd2fb3c..097ff0989a 100644
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -3,7 +3,11 @@
  */
 import * as fs from 'fs';
 import * as path from 'path';
-import { addHoverClass, buildNodeWithSN, createCache } from '../src/rebuild';
+import {
+  adaptCssForReplay,
+  buildNodeWithSN,
+  createCache,
+} from '../src/rebuild';
 import { NodeType } from '../src/types';
 import { createMirror, Mirror } from '../src/utils';
 
@@ -81,47 +85,90 @@ describe('rebuild', function () {
   describe('add hover class to hover selector related rules', function () {
     it('will do nothing to css text without :hover', () => {
       const cssText = 'body { color: white }';
-      expect(addHoverClass(cssText, cache)).toEqual(cssText);
+      expect(adaptCssForReplay(cssText, cache)).toEqual(cssText);
     });
 
     it('can add hover class to css text', () => {
       const cssText = '.a:hover { color: white }';
-      expect(addHoverClass(cssText, cache)).toEqual(
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
         '.a:hover, .a.\\:hover { color: white }',
       );
     });
 
+    it('can correctly add hover when in middle of selector', () => {
+      const cssText = 'ul li a:hover img { color: white }';
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
+        'ul li a:hover img, ul li a.\\:hover img { color: white }',
+      );
+    });
+
+    it('can correctly add hover on multiline selector', () => {
+      const cssText = `ul li.specified a:hover img,
+ul li.multiline
+b:hover
+img,
+ul li.specified c:hover img {
+  color: white
+}`;
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
+        `ul li.specified a:hover img, ul li.specified a.\\:hover img,
+ul li.multiline
+b:hover
+img, ul li.multiline
+b.\\:hover
+img,
+ul li.specified c:hover img, ul li.specified c.\\:hover img {
+  color: white
+}`,
+      );
+    });
+
+    it('can add hover class within media query', () => {
+      const cssText = '@media screen { .m:hover { color: white } }';
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
+        '@media screen { .m:hover, .m.\\:hover { color: white } }',
+      );
+    });
+
     it('can add hover class when there is multi selector', () => {
       const cssText = '.a, .b:hover, .c { color: white }';
-      expect(addHoverClass(cssText, cache)).toEqual(
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
         '.a, .b:hover, .b.\\:hover, .c { color: white }',
       );
     });
 
     it('can add hover class when there is a multi selector with the same prefix', () => {
       const cssText = '.a:hover, .a:hover::after { color: white }';
-      expect(addHoverClass(cssText, cache)).toEqual(
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
         '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
       );
     });
 
     it('can add hover class when :hover is not the end of selector', () => {
       const cssText = 'div:hover::after { color: white }';
-      expect(addHoverClass(cssText, cache)).toEqual(
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
         'div:hover::after, div.\\:hover::after { color: white }',
       );
     });
 
     it('can add hover class when the selector has multi :hover', () => {
       const cssText = 'a:hover b:hover { color: white }';
-      expect(addHoverClass(cssText, cache)).toEqual(
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
         'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
       );
     });
 
     it('will ignore :hover in css value', () => {
       const cssText = '.a::after { content: ":hover" }';
-      expect(addHoverClass(cssText, cache)).toEqual(cssText);
+      expect(adaptCssForReplay(cssText, cache)).toEqual(cssText);
+    });
+
+    it('can adapt media rules to replay context', () => {
+      const cssText =
+        '@media only screen and (min-device-width : 1200px) { .a { width: 10px; }}';
+      expect(adaptCssForReplay(cssText, cache)).toEqual(
+        '@media only screen and (min-width : 1200px) { .a { width: 10px; }}',
+      );
     });
 
     // this benchmark is unreliable when run in parallel with other tests
@@ -131,7 +178,7 @@ describe('rebuild', function () {
         'utf8',
       );
       const start = process.hrtime();
-      addHoverClass(cssText, cache);
+      adaptCssForReplay(cssText, cache);
       const end = process.hrtime(start);
       const duration = getDuration(end);
       expect(duration).toBeLessThan(100);
@@ -146,11 +193,11 @@ describe('rebuild', function () {
       );
 
       const start = process.hrtime();
-      addHoverClass(cssText, cache);
+      adaptCssForReplay(cssText, cache);
       const end = process.hrtime(start);
 
       const cachedStart = process.hrtime();
-      addHoverClass(cssText, cache);
+      adaptCssForReplay(cssText, cache);
       const cachedEnd = process.hrtime(cachedStart);
 
       expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
diff --git a/packages/rrweb/CHANGELOG.md b/packages/rrweb/CHANGELOG.md
index d920660c75..f3cabd4890 100644
--- a/packages/rrweb/CHANGELOG.md
+++ b/packages/rrweb/CHANGELOG.md
@@ -1,5 +1,64 @@
 # rrweb
 
+## 2.0.0-alpha.13
+
+### Minor Changes
+
+- [#1432](https://github.com/rrweb-io/rrweb/pull/1432) [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961) Thanks [@Juice10](https://github.com/Juice10)! - Full overhawl of `video` and `audio` element playback. More robust and fixes lots of bugs related to pausing/playing/skipping/muting/playbackRate etc.
+
+### Patch Changes
+
+- [#1422](https://github.com/rrweb-io/rrweb/pull/1422) [`3d1877c`](https://github.com/rrweb-io/rrweb/commit/3d1877cff83d9a018630674fb6e730050ceef812) Thanks [@marandaneto](https://github.com/marandaneto)! - fix: createImageBitmap throws DOMException if source is 0 width or height
+
+- [#1432](https://github.com/rrweb-io/rrweb/pull/1432) [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961) Thanks [@Juice10](https://github.com/Juice10)! - Record `loop` on `<audio>` & `<video>` elements.
+
+- [#1445](https://github.com/rrweb-io/rrweb/pull/1445) [`02f50d2`](https://github.com/rrweb-io/rrweb/commit/02f50d260cfe72209c94de1679336737f238e216) Thanks [@daibhin](https://github.com/daibhin)! - fix: protect against missing parentNode
+
+- Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`c278d06`](https://github.com/rrweb-io/rrweb/commit/c278d068a0e2f1175cce7cc63920ac1fbf4783cf)]:
+  - rrdom@2.0.0-alpha.13
+  - rrweb-snapshot@2.0.0-alpha.13
+  - @rrweb/types@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Minor Changes
+
+- [#1310](https://github.com/rrweb-io/rrweb/pull/1310) [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882) Thanks [@benjackwhite](https://github.com/benjackwhite)! - Extends maskTextFn to pass the HTMLElement to the deciding function
+
+### Patch Changes
+
+- [#1403](https://github.com/rrweb-io/rrweb/pull/1403) [`af0962c`](https://github.com/rrweb-io/rrweb/commit/af0962cc6c80b693bbc622520032d17342685cf6) Thanks [@pauldambra](https://github.com/pauldambra)! - safely capture BigInt values with the console log plugin"
+
+- [#1327](https://github.com/rrweb-io/rrweb/pull/1327) [`57a940a`](https://github.com/rrweb-io/rrweb/commit/57a940afac0bdd14cd82937915d53110b5311673) Thanks [@mydea](https://github.com/mydea)! - fix: Fix checking for `patchTarget` in `initAdoptedStyleSheetObserver`
+
+- [#1155](https://github.com/rrweb-io/rrweb/pull/1155) [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81) Thanks [@YunFeng0817](https://github.com/YunFeng0817)! - Feat: Add support for replaying :defined pseudo-class of custom elements
+
+- [#1340](https://github.com/rrweb-io/rrweb/pull/1340) [`9c6edfe`](https://github.com/rrweb-io/rrweb/commit/9c6edfe2261680b4e92284be69f9d183b1eca8f4) Thanks [@mydea](https://github.com/mydea)! - ref: Avoid unnecessary cloning of objects or arrays
+
+- [#1383](https://github.com/rrweb-io/rrweb/pull/1383) [`1e0b273`](https://github.com/rrweb-io/rrweb/commit/1e0b27382210db0168d2a79d82c13698082b0983) Thanks [@daibhin](https://github.com/daibhin)! - export the canvasMutation function
+
+- [#1324](https://github.com/rrweb-io/rrweb/pull/1324) [`1fe39ab`](https://github.com/rrweb-io/rrweb/commit/1fe39ab0db7f5d2b04f4a4f39fb5c0cfee33a1f8) Thanks [@Belen-Luo](https://github.com/Belen-Luo)! - export eventWithTime for consumption by typescript code
+
+- [#1343](https://github.com/rrweb-io/rrweb/pull/1343) [`05478c3`](https://github.com/rrweb-io/rrweb/commit/05478c36dde03a118099783d908bb3e465e9859c) Thanks [@mdellanoce](https://github.com/mdellanoce)! - use WeakMap for faster attributeCursor lookup while processing attribute mutations
+
+- [#1272](https://github.com/rrweb-io/rrweb/pull/1272) [`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Perf: Avoid creation of intermediary array when iterating over style rules
+
+- [#1311](https://github.com/rrweb-io/rrweb/pull/1311) [`980a38c`](https://github.com/rrweb-io/rrweb/commit/980a38c816d763833fc3491f56d03c959a41122d) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Add 'recordDOM' config option to turn off recording of DOM (making recordings unreplayable). Specialist use case e.g. only heatmap click/scroll recording
+
+- [#1351](https://github.com/rrweb-io/rrweb/pull/1351) [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Don't double-record the values of <textarea>s when they already have some content prefilled #1301
+
+- [#1431](https://github.com/rrweb-io/rrweb/pull/1431) [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Ensure :hover works on replayer, even if a rule is behind a media query
+  Respect the intent behind max-device-width and min-device-width media queries so that their effects are apparent in the replayer context
+
+- [#1374](https://github.com/rrweb-io/rrweb/pull/1374) [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817) Thanks [@andrewpomeroy](https://github.com/andrewpomeroy)! - Capture stylesheets designated as `rel="preload"`
+
+- [#1349](https://github.com/rrweb-io/rrweb/pull/1349) [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Snapshot performance when masking text: Avoid the repeated calls to `closest` when recursing through the DOM
+
+- Updated dependencies [[`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f), [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8), [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b), [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81), [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817), [`e607e83`](https://github.com/rrweb-io/rrweb/commit/e607e83b21d45131a56c1ff606e9519a5b475fc1), [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882), [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e)]:
+  - rrweb-snapshot@2.0.0-alpha.12
+  - rrdom@2.0.0-alpha.12
+  - @rrweb/types@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 2315abfec8..9fcf6bb5a6 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -82,13 +82,13 @@
     "tslib": "^2.3.1"
   },
   "dependencies": {
-    "@rrweb/types": "^2.0.0-alpha.11",
+    "@rrweb/types": "^2.0.0-alpha.13",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^3.0.0",
-    "rrdom": "^2.0.0-alpha.11",
-    "rrweb-snapshot": "^2.0.0-alpha.11"
+    "rrdom": "^2.0.0-alpha.13",
+    "rrweb-snapshot": "^2.0.0-alpha.13"
   }
 }
diff --git a/packages/rrweb/scripts/repl.js b/packages/rrweb/scripts/repl.js
index 0bf4a7de62..a36f34a285 100644
--- a/packages/rrweb/scripts/repl.js
+++ b/packages/rrweb/scripts/repl.js
@@ -22,40 +22,44 @@ void (async () => {
   let events = [];
 
   async function injectRecording(frame) {
-    await frame.evaluate((rrwebCode) => {
-      const win = window;
-      if (win.__IS_RECORDING__) return;
-      win.__IS_RECORDING__ = true;
+    try {
+      await frame.evaluate((rrwebCode) => {
+        const win = window;
+        if (win.__IS_RECORDING__) return;
+        win.__IS_RECORDING__ = true;
 
-      (async () => {
-        function loadScript(code) {
-          const s = document.createElement('script');
-          let r = false;
-          s.type = 'text/javascript';
-          s.innerHTML = code;
-          if (document.head) {
-            document.head.append(s);
-          } else {
-            requestAnimationFrame(() => {
+        (async () => {
+          function loadScript(code) {
+            const s = document.createElement('script');
+            let r = false;
+            s.type = 'text/javascript';
+            s.innerHTML = code;
+            if (document.head) {
               document.head.append(s);
-            });
+            } else {
+              requestAnimationFrame(() => {
+                document.head.append(s);
+              });
+            }
           }
-        }
-        loadScript(rrwebCode);
+          loadScript(rrwebCode);
 
-        win.events = [];
-        rrweb.record({
-          emit: (event) => {
-            win.events.push(event);
-            win._replLog(event);
-          },
-          plugins: [],
-          recordCanvas: true,
-          recordCrossOriginIframes: true,
-          collectFonts: true,
-        });
-      })();
-    }, code);
+          win.events = [];
+          rrweb.record({
+            emit: (event) => {
+              win.events.push(event);
+              win._replLog(event);
+            },
+            plugins: [],
+            recordCanvas: true,
+            recordCrossOriginIframes: true,
+            collectFonts: true,
+          });
+        })();
+      }, code);
+    } catch (e) {
+      console.error('failed to inject recording script:', e);
+    }
   }
 
   await start('https://react-redux.realworld.io');
diff --git a/packages/rrweb/scripts/stream.js b/packages/rrweb/scripts/stream.js
index 93e0a66d31..39693b1192 100644
--- a/packages/rrweb/scripts/stream.js
+++ b/packages/rrweb/scripts/stream.js
@@ -24,55 +24,58 @@ const pluginCode = fs.readFileSync(
 );
 
 async function injectRecording(frame) {
-  await frame.evaluate(
-    (rrwebCode, pluginCode) => {
-      const win = window;
-      if (win.__IS_RECORDING__) return;
-      win.__IS_RECORDING__ = true;
-
-      (async () => {
-        function loadScript(code) {
-          const s = document.createElement('script');
-          s.type = 'text/javascript';
-          s.innerHTML = code;
-          if (document.head) {
-            document.head.append(s);
-          } else {
-            requestAnimationFrame(() => {
+  try {
+    await frame.evaluate(
+      (rrwebCode, pluginCode) => {
+        const win = window;
+        if (win.__IS_RECORDING__) return;
+        win.__IS_RECORDING__ = true;
+
+        (async () => {
+          function loadScript(code) {
+            const s = document.createElement('script');
+            s.type = 'text/javascript';
+            s.innerHTML = code;
+            if (document.head) {
               document.head.append(s);
-            });
+            } else {
+              requestAnimationFrame(() => {
+                document.head.append(s);
+              });
+            }
           }
-        }
-        loadScript(rrwebCode);
-        loadScript(pluginCode);
-
-        win.events = [];
-        window.record = win.rrweb.record;
-        window.plugin = new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord(
-          {
-            signalSendCallback: (msg) => {
-              // [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
-              _signal(msg);
+          loadScript(rrwebCode);
+          loadScript(pluginCode);
+
+          win.events = [];
+          window.record = win.rrweb.record;
+          window.plugin =
+            new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord({
+              signalSendCallback: (msg) => {
+                // [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
+                _signal(msg);
+              },
+            });
+
+          window.record({
+            emit: (event) => {
+              win.events.push(event);
+              win._captureEvent(event);
             },
-          },
-        );
-
-        window.record({
-          emit: (event) => {
-            win.events.push(event);
-            win._captureEvent(event);
-          },
-          plugins: [window.plugin.initPlugin()],
-          recordCanvas: false,
-          recordCrossOriginIframes: true,
-          collectFonts: true,
-          inlineImages: true,
-        });
-      })();
-    },
-    code,
-    pluginCode,
-  );
+            plugins: [window.plugin.initPlugin()],
+            recordCanvas: false,
+            recordCrossOriginIframes: true,
+            collectFonts: true,
+            inlineImages: true,
+          });
+        })();
+      },
+      code,
+      pluginCode,
+    );
+  } catch (e) {
+    console.error('failed to inject script, error:', e);
+  }
 }
 
 async function startReplay(page, serverURL, recordedPage) {
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
index 26985cc49a..2d9205c0cb 100644
--- a/packages/rrweb/src/record/iframe-manager.ts
+++ b/packages/rrweb/src/record/iframe-manager.ts
@@ -3,7 +3,11 @@ import { genId, NodeType } from 'rrweb-snapshot';
 import type { CrossOriginIframeMessageEvent } from '../types';
 import CrossOriginIframeMirror from './cross-origin-iframe-mirror';
 import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime, mutationCallBack } from '@rrweb/types';
+import type {
+  eventWithTime,
+  eventWithoutTime,
+  mutationCallBack,
+} from '@rrweb/types';
 import type { StylesheetManager } from './stylesheet-manager';
 
 export class IframeManager {
@@ -16,7 +20,7 @@ export class IframeManager {
     new WeakMap();
   private mirror: Mirror;
   private mutationCb: mutationCallBack;
-  private wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void;
+  private wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void;
   private loadListener?: (iframeEl: HTMLIFrameElement) => unknown;
   private stylesheetManager: StylesheetManager;
   private recordCrossOriginIframes: boolean;
@@ -26,7 +30,7 @@ export class IframeManager {
     mutationCb: mutationCallBack;
     stylesheetManager: StylesheetManager;
     recordCrossOriginIframes: boolean;
-    wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void;
+    wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void;
   }) {
     this.mutationCb = options.mutationCb;
     this.wrappedEmit = options.wrappedEmit;
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index 3b4475cfc9..7be978199d 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -19,7 +19,7 @@ import {
 import type { recordOptions } from '../types';
 import {
   EventType,
-  event,
+  eventWithoutTime,
   eventWithTime,
   IncrementalSource,
   listenerHandler,
@@ -40,14 +40,7 @@ import {
   unregisterErrorHandler,
 } from './error-handler';
 
-function wrapEvent(e: event): eventWithTime {
-  return {
-    ...e,
-    timestamp: nowTimestamp(),
-  };
-}
-
-let wrappedEmit!: (e: eventWithTime, isCheckout?: boolean) => void;
+let wrappedEmit!: (e: eventWithoutTime, isCheckout?: boolean) => void;
 
 let takeFullSnapshot!: (isCheckout?: boolean) => void;
 let canvasManager!: CanvasManager;
@@ -187,7 +180,9 @@ function record<T = eventWithTime>(
     }
     return e as unknown as T;
   };
-  wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
+  wrappedEmit = (r: eventWithoutTime, isCheckout?: boolean) => {
+    const e = r as eventWithTime;
+    e.timestamp = nowTimestamp();
     if (
       mutationBuffers[0]?.isFrozen() &&
       e.type !== EventType.FullSnapshot &&
@@ -238,47 +233,39 @@ function record<T = eventWithTime>(
   };
 
   const wrappedMutationEmit = (m: mutationCallbackParam) => {
-    wrappedEmit(
-      wrapEvent({
-        type: EventType.IncrementalSnapshot,
-        data: {
-          source: IncrementalSource.Mutation,
-          ...m,
-        },
-      }),
-    );
+    wrappedEmit({
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.Mutation,
+        ...m,
+      },
+    });
   };
   const wrappedScrollEmit: scrollCallback = (p) =>
-    wrappedEmit(
-      wrapEvent({
-        type: EventType.IncrementalSnapshot,
-        data: {
-          source: IncrementalSource.Scroll,
-          ...p,
-        },
-      }),
-    );
+    wrappedEmit({
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.Scroll,
+        ...p,
+      },
+    });
   const wrappedCanvasMutationEmit = (p: canvasMutationParam) =>
-    wrappedEmit(
-      wrapEvent({
-        type: EventType.IncrementalSnapshot,
-        data: {
-          source: IncrementalSource.CanvasMutation,
-          ...p,
-        },
-      }),
-    );
+    wrappedEmit({
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.CanvasMutation,
+        ...p,
+      },
+    });
 
   const wrappedAdoptedStyleSheetEmit = (a: adoptedStyleSheetParam) =>
-    wrappedEmit(
-      wrapEvent({
-        type: EventType.IncrementalSnapshot,
-        data: {
-          source: IncrementalSource.AdoptedStyleSheet,
-          ...a,
-        },
-      }),
-    );
+    wrappedEmit({
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.AdoptedStyleSheet,
+        ...a,
+      },
+    });
 
   const stylesheetManager = new StylesheetManager({
     mutationCb: wrappedMutationEmit,
@@ -350,14 +337,14 @@ function record<T = eventWithTime>(
       return;
     }
     wrappedEmit(
-      wrapEvent({
+      {
         type: EventType.Meta,
         data: {
           href: window.location.href,
           width: getWindowWidth(),
           height: getWindowHeight(),
         },
-      }),
+      },
       isCheckout,
     );
 
@@ -406,13 +393,13 @@ function record<T = eventWithTime>(
     }
 
     wrappedEmit(
-      wrapEvent({
+      {
         type: EventType.FullSnapshot,
         data: {
           node,
           initialOffset: getWindowScroll(window),
         },
-      }),
+      },
       isCheckout,
     );
     mutationBuffers.forEach((buf) => buf.unlock()); // generate & emit any mutations that happened during snapshotting, as can now apply against the newly built mirror
@@ -433,108 +420,88 @@ function record<T = eventWithTime>(
         {
           mutationCb: wrappedMutationEmit,
           mousemoveCb: (positions, source) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source,
-                  positions,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source,
+                positions,
+              },
+            }),
           mouseInteractionCb: (d) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.MouseInteraction,
-                  ...d,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.MouseInteraction,
+                ...d,
+              },
+            }),
           scrollCb: wrappedScrollEmit,
           viewportResizeCb: (d) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.ViewportResize,
-                  ...d,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.ViewportResize,
+                ...d,
+              },
+            }),
           inputCb: (v) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.Input,
-                  ...v,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.Input,
+                ...v,
+              },
+            }),
           mediaInteractionCb: (p) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.MediaInteraction,
-                  ...p,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.MediaInteraction,
+                ...p,
+              },
+            }),
           styleSheetRuleCb: (r) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.StyleSheetRule,
-                  ...r,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.StyleSheetRule,
+                ...r,
+              },
+            }),
           styleDeclarationCb: (r) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.StyleDeclaration,
-                  ...r,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.StyleDeclaration,
+                ...r,
+              },
+            }),
           canvasMutationCb: wrappedCanvasMutationEmit,
           fontCb: (p) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.Font,
-                  ...p,
-                },
-              }),
-            ),
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.Font,
+                ...p,
+              },
+            }),
           selectionCb: (p) => {
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.Selection,
-                  ...p,
-                },
-              }),
-            );
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.Selection,
+                ...p,
+              },
+            });
           },
           customElementCb: (c) => {
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.CustomElement,
-                  ...c,
-                },
-              }),
-            );
+            wrappedEmit({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.CustomElement,
+                ...c,
+              },
+            });
           },
           blockClass,
           ignoreClass,
@@ -570,15 +537,13 @@ function record<T = eventWithTime>(
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
-                  wrappedEmit(
-                    wrapEvent({
-                      type: EventType.Plugin,
-                      data: {
-                        plugin: p.name,
-                        payload,
-                      },
-                    }),
-                  ),
+                  wrappedEmit({
+                    type: EventType.Plugin,
+                    data: {
+                      plugin: p.name,
+                      payload,
+                    },
+                  }),
               })) || [],
         },
         hooks,
@@ -607,12 +572,10 @@ function record<T = eventWithTime>(
     } else {
       handlers.push(
         on('DOMContentLoaded', () => {
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.DomContentLoaded,
-              data: {},
-            }),
-          );
+          wrappedEmit({
+            type: EventType.DomContentLoaded,
+            data: {},
+          });
           if (recordAfter === 'DOMContentLoaded') init();
         }),
       );
@@ -620,12 +583,10 @@ function record<T = eventWithTime>(
         on(
           'load',
           () => {
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.Load,
-                data: {},
-              }),
-            );
+            wrappedEmit({
+              type: EventType.Load,
+              data: {},
+            });
             if (recordAfter === 'load') init();
           },
           window,
@@ -648,15 +609,13 @@ record.addCustomEvent = <T>(tag: string, payload: T) => {
   if (!recording) {
     throw new Error('please add custom event after start recording');
   }
-  wrappedEmit(
-    wrapEvent({
-      type: EventType.Custom,
-      data: {
-        tag,
-        payload,
-      },
-    }),
-  );
+  wrappedEmit({
+    type: EventType.Custom,
+    data: {
+      tag,
+      payload,
+    },
+  });
 };
 
 record.freezePage = () => {
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 81592e8170..f4267af340 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -441,7 +441,10 @@ export default class MutationBuffer {
       texts: this.texts
         .map((text) => {
           const n = text.node;
-          if ((n.parentNode as Element).tagName === 'TEXTAREA') {
+          if (
+            n.parentNode &&
+            (n.parentNode as Element).tagName === 'TEXTAREA'
+          ) {
             // the node is being ignored as it isn't in the mirror, so shift mutation to attributes on parent textarea
             this.genTextAreaValueMutation(n.parentNode as HTMLTextAreaElement);
           }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 0aa0f9856b..dcd30e4718 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -1042,7 +1042,7 @@ function initMediaInteractionObserver({
         ) {
           return;
         }
-        const { currentTime, volume, muted, playbackRate } =
+        const { currentTime, volume, muted, playbackRate, loop } =
           target as HTMLMediaElement;
         mediaInteractionCb({
           type,
@@ -1051,6 +1051,7 @@ function initMediaInteractionObserver({
           volume,
           muted,
           playbackRate,
+          loop,
         });
       }),
       sampling.media || 500,
diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index a8e06e468b..f825877f69 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -184,6 +184,12 @@ export class CanvasManager {
         .forEach(async (canvas: HTMLCanvasElement) => {
           const id = this.mirror.getId(canvas);
           if (snapshotInProgressMap.get(id)) return;
+
+          // The browser throws if the canvas is 0 in size
+          // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
+          // Assuming the same happens with height
+          if (canvas.width === 0 || canvas.height === 0) return;
+
           snapshotInProgressMap.set(id, true);
           if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) {
             // if the canvas hasn't been modified recently,
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index ee493fec0e..89aa66d933 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -47,7 +47,6 @@ import {
   ReplayerEvents,
   Handler,
   Emitter,
-  MediaInteractions,
   metaEvent,
   mutationData,
   scrollData,
@@ -81,8 +80,8 @@ import getInjectStyleRules from './styles/inject-style';
 import './styles/style.css';
 import canvasMutation from './canvas';
 import { deserializeArg } from './canvas/deserialize-args';
+import { MediaManager } from './media';
 
-const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
 
 // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734
@@ -143,6 +142,9 @@ export class Replayer {
   // Used to track StyleSheetObjects adopted on multiple document hosts.
   private styleMirror: StyleSheetMirror = new StyleSheetMirror();
 
+  // Used to track video & audio elements, and keep them in sync with general playback.
+  private mediaManager: MediaManager;
+
   private firstFullSnapshot: eventWithTime | true | null = null;
 
   private newDocumentQueue: addedNodeMutation[] = [];
@@ -179,6 +181,7 @@ export class Replayer {
       root: document.body,
       loadTimeout: 0,
       skipInactive: false,
+      inactivePeriodThreshold: 10 * 1000,
       showWarning: true,
       showDebug: false,
       blockClass: 'rr-block',
@@ -324,6 +327,7 @@ export class Replayer {
       this.firstFullSnapshot = null;
       this.mirror.reset();
       this.styleMirror.reset();
+      this.mediaManager.reset();
     });
 
     const timer = new Timer([], {
@@ -366,6 +370,13 @@ export class Replayer {
         speed: state,
       });
     });
+    this.mediaManager = new MediaManager({
+      warn: this.warn.bind(this),
+      service: this.service,
+      speedService: this.speedService,
+      emitter: this.emitter,
+      getCurrentTime: this.getCurrentTime.bind(this),
+    });
 
     // rebuild first full snapshot as the poster of the player
     // maybe we can cache it for performance optimization
@@ -464,10 +475,16 @@ export class Replayer {
     };
   }
 
+  /**
+   * Get the actual time offset the player is at now compared to the first event.
+   */
   public getCurrentTime(): number {
     return this.timer.timeOffset + this.getTimeOffset();
   }
 
+  /**
+   * Get the time offset the player is at now compared to the first event, but without regard for the timer.
+   */
   public getTimeOffset(): number {
     const { baselineTime, events } = this.service.state.context;
     return baselineTime - events[0].timestamp;
@@ -527,6 +544,9 @@ export class Replayer {
    */
   public destroy() {
     this.pause();
+    this.mirror.reset();
+    this.styleMirror.reset();
+    this.mediaManager.reset();
     this.config.root.removeChild(this.wrapper);
     this.emitter.emit(ReplayerEvents.Destroy);
   }
@@ -667,9 +687,10 @@ export class Replayer {
             // Timer (requestAnimationFrame) can be faster than setTimeout(..., 1)
             this.firstFullSnapshot = true;
           }
+          this.mediaManager.reset();
+          this.styleMirror.reset();
           this.rebuildFullSnapshot(event, isSync);
           this.iframe.contentWindow?.scrollTo(event.data.initialOffset);
-          this.styleMirror.reset();
         };
         break;
       case EventType.IncrementalSnapshot:
@@ -692,7 +713,7 @@ export class Replayer {
                 if (
                   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                   _event.delay! - event.delay! >
-                  SKIP_TIME_THRESHOLD *
+                  this.config.inactivePeriodThreshold *
                     this.speedService.state.context.timer.speed
                 ) {
                   this.nextUserInteractionEvent = _event;
@@ -778,6 +799,14 @@ export class Replayer {
     const collected: AppendedIframe[] = [];
     const afterAppend = (builtNode: Node, id: number) => {
       this.collectIframeAndAttachDocument(collected, builtNode);
+      if (this.mediaManager.isSupportedMediaElement(builtNode)) {
+        const { events } = this.service.state.context;
+        this.mediaManager.addMediaElements(
+          builtNode,
+          event.timestamp - events[0].timestamp,
+          this.mirror,
+        );
+      }
       for (const plugin of this.config.plugins || []) {
         if (plugin.onBuild)
           plugin.onBuild(builtNode, {
@@ -1261,35 +1290,14 @@ export class Replayer {
           return this.debugNodeNotFound(d, d.id);
         }
         const mediaEl = target as HTMLMediaElement | RRMediaElement;
-        try {
-          if (d.currentTime !== undefined) {
-            mediaEl.currentTime = d.currentTime;
-          }
-          if (d.volume !== undefined) {
-            mediaEl.volume = d.volume;
-          }
-          if (d.muted !== undefined) {
-            mediaEl.muted = d.muted;
-          }
-          if (d.type === MediaInteractions.Pause) {
-            mediaEl.pause();
-          }
-          if (d.type === MediaInteractions.Play) {
-            // remove listener for 'canplay' event because play() is async and returns a promise
-            // i.e. media will evntualy start to play when data is loaded
-            // 'canplay' event fires even when currentTime attribute changes which may lead to
-            // unexpeted behavior
-            void mediaEl.play();
-          }
-          if (d.type === MediaInteractions.RateChange) {
-            mediaEl.playbackRate = d.playbackRate;
-          }
-        } catch (error) {
-          this.warn(
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
-            `Failed to replay media interactions: ${error.message || error}`,
-          );
-        }
+        const { events } = this.service.state.context;
+
+        this.mediaManager.mediaMutation({
+          target: mediaEl,
+          timeOffset: e.timestamp - events[0].timestamp,
+          mutation: d,
+        });
+
         break;
       }
       case IncrementalSource.StyleSheetRule:
@@ -1366,6 +1374,11 @@ export class Replayer {
     }
   }
 
+  /**
+   * Apply the mutation to the virtual dom or the real dom.
+   * @param d - The mutation data.
+   * @param isSync - Whether the mutation should be applied synchronously (while fast-forwarding).
+   */
   private applyMutation(d: mutationData, isSync: boolean) {
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts
new file mode 100644
index 0000000000..d76a37a0f7
--- /dev/null
+++ b/packages/rrweb/src/replay/media/index.ts
@@ -0,0 +1,305 @@
+import { Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
+import type { RRMediaElement } from 'rrdom/es';
+import type { createPlayerService, createSpeedService } from '../machine';
+import type { Mirror, mediaAttributes } from 'rrweb-snapshot';
+import type { mediaInteractionData } from '@rrweb/types';
+
+type MediaState = {
+  isPlaying: boolean;
+  currentTimeAtLastInteraction: number;
+  lastInteractionTimeOffset: number;
+  playbackRate: number;
+  loop: boolean;
+  volume: number;
+  muted: boolean;
+};
+
+export class MediaManager {
+  private mediaMap: Map<HTMLMediaElement | RRMediaElement, MediaState> =
+    new Map();
+  private warn: (...args: Parameters<typeof console.warn>) => void;
+  private service: ReturnType<typeof createPlayerService>;
+  private speedService: ReturnType<typeof createSpeedService>;
+  private emitter: Emitter;
+  private getCurrentTime: () => number;
+  private metadataCallbackMap: WeakMap<
+    HTMLMediaElement | RRMediaElement,
+    () => void
+  > = new Map();
+
+  constructor(options: {
+    warn: (...args: Parameters<typeof console.warn>) => void;
+    service: ReturnType<typeof createPlayerService>;
+    speedService: ReturnType<typeof createSpeedService>;
+    getCurrentTime: () => number;
+    emitter: Emitter;
+  }) {
+    this.warn = options.warn;
+    this.service = options.service;
+    this.speedService = options.speedService;
+    this.emitter = options.emitter;
+    this.getCurrentTime = options.getCurrentTime;
+
+    this.emitter.on(ReplayerEvents.Start, this.start.bind(this));
+    this.emitter.on(ReplayerEvents.SkipStart, this.start.bind(this));
+    this.emitter.on(ReplayerEvents.Pause, this.pause.bind(this));
+    this.emitter.on(ReplayerEvents.Finish, this.pause.bind(this));
+    this.speedService.subscribe(() => {
+      this.syncAllMediaElements();
+    });
+  }
+
+  private safePause(target: HTMLMediaElement | RRMediaElement) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause
+    // RRMediaElement inherits from BaseRRMediaElementImpl, which has a pause method
+    // but we received a type error when trying to call it directly (target.pause is not a function)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    if (typeof target.pause === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      target.pause();
+    }
+  }
+
+  private syncAllMediaElements(options = { pause: false }) {
+    this.mediaMap.forEach((mediaState, target) => {
+      this.syncTargetWithState(target);
+      if (options.pause) {
+        this.safePause(target);
+      }
+    });
+  }
+
+  private start() {
+    this.syncAllMediaElements();
+  }
+
+  private pause() {
+    this.syncAllMediaElements({ pause: true });
+  }
+
+  private seekTo({
+    time,
+    target,
+    mediaState,
+  }: {
+    time: number;
+    target: HTMLMediaElement | RRMediaElement;
+    mediaState: MediaState;
+  }) {
+    if (mediaState.isPlaying) {
+      const differenceBetweenCurrentTimeAndMediaMutationTimestamp =
+        time - mediaState.lastInteractionTimeOffset;
+      const mediaPlaybackOffset =
+        (differenceBetweenCurrentTimeAndMediaMutationTimestamp / 1000) *
+        mediaState.playbackRate;
+
+      const duration = 'duration' in target && target.duration;
+
+      // Video hasn't loaded yet, wait for metadata
+      if (Number.isNaN(duration)) {
+        this.waitForMetadata(target);
+        return;
+      }
+
+      let seekToTime =
+        mediaState.currentTimeAtLastInteraction + mediaPlaybackOffset;
+
+      if (
+        target.loop &&
+        // RRMediaElement doesn't have a duration property
+        duration !== false
+      ) {
+        seekToTime = seekToTime % duration;
+      }
+
+      target.currentTime = seekToTime;
+    } else {
+      this.safePause(target);
+      target.currentTime = mediaState.currentTimeAtLastInteraction;
+    }
+  }
+
+  private waitForMetadata(target: HTMLMediaElement | RRMediaElement) {
+    if (this.metadataCallbackMap.has(target)) return;
+    if (!('addEventListener' in target)) return;
+
+    const onLoadedMetadata = () => {
+      this.metadataCallbackMap.delete(target);
+      const mediaState = this.mediaMap.get(target);
+      if (!mediaState) return;
+      this.seekTo({
+        time: this.getCurrentTime(),
+        target,
+        mediaState,
+      });
+    };
+
+    this.metadataCallbackMap.set(target, onLoadedMetadata);
+    target.addEventListener('loadedmetadata', onLoadedMetadata, {
+      once: true,
+    });
+  }
+
+  private getMediaStateFromMutation({
+    target,
+    timeOffset,
+    mutation,
+  }: {
+    target: HTMLMediaElement | RRMediaElement;
+    timeOffset: number;
+    mutation: mediaInteractionData;
+  }): MediaState {
+    const lastState = this.mediaMap.get(target);
+    const { type, playbackRate, currentTime, muted, volume, loop } = mutation;
+
+    const isPlaying =
+      type === MediaInteractions.Play ||
+      (type !== MediaInteractions.Pause &&
+        (lastState?.isPlaying || target.getAttribute('autoplay') !== null));
+
+    const mediaState: MediaState = {
+      isPlaying,
+      currentTimeAtLastInteraction:
+        currentTime ?? lastState?.currentTimeAtLastInteraction ?? 0,
+      lastInteractionTimeOffset: timeOffset,
+      playbackRate: playbackRate ?? lastState?.playbackRate ?? 1,
+      volume: volume ?? lastState?.volume ?? 1,
+      muted: muted ?? lastState?.muted ?? target.getAttribute('muted') === null,
+      loop: loop ?? lastState?.loop ?? target.getAttribute('loop') === null,
+    };
+
+    return mediaState;
+  }
+
+  private syncTargetWithState(target: HTMLMediaElement | RRMediaElement) {
+    const mediaState = this.mediaMap.get(target);
+    if (!mediaState) return;
+    const { muted, loop, volume, isPlaying } = mediaState;
+    const playerIsPaused = this.service.state.matches('paused');
+    const playbackRate =
+      mediaState.playbackRate * this.speedService.state.context.timer.speed;
+
+    try {
+      this.seekTo({
+        time: this.getCurrentTime(),
+        target,
+        mediaState,
+      });
+
+      if (target.volume !== volume) {
+        target.volume = volume;
+      }
+      target.muted = muted;
+      target.loop = loop;
+
+      if (target.playbackRate !== playbackRate) {
+        // Avoid setting playbackRate when it's already the same
+        // Safari drops frames whenever playbackRate is set, even if it's the same
+        target.playbackRate = playbackRate;
+      }
+
+      if (isPlaying && !playerIsPaused) {
+        // remove listener for 'canplay' event because play() is async and returns a promise
+        // i.e. media will eventually start to play when data is loaded
+        // 'canplay' event fires even when currentTime attribute changes which may lead to
+        // unexpected behavior
+        void target.play();
+      } else {
+        this.safePause(target);
+      }
+    } catch (error) {
+      this.warn(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
+        `Failed to replay media interactions: ${error.message || error}`,
+      );
+    }
+  }
+
+  public addMediaElements(node: Node, timeOffset: number, mirror: Mirror) {
+    if (!['AUDIO', 'VIDEO'].includes(node.nodeName)) return;
+    const target = node as HTMLMediaElement;
+    const serializedNode = mirror.getMeta(target);
+    if (!serializedNode || !('attributes' in serializedNode)) return;
+    const playerIsPaused = this.service.state.matches('paused');
+    const mediaAttributes = serializedNode.attributes as
+      | mediaAttributes
+      | Record<string, never>;
+
+    let isPlaying = false;
+    if (mediaAttributes.rr_mediaState) {
+      isPlaying = mediaAttributes.rr_mediaState === 'played';
+    } else {
+      isPlaying = target.getAttribute('autoplay') !== null;
+    }
+    if (isPlaying && playerIsPaused) this.safePause(target);
+
+    let playbackRate = 1;
+    if (typeof mediaAttributes.rr_mediaPlaybackRate === 'number') {
+      playbackRate = mediaAttributes.rr_mediaPlaybackRate;
+    }
+
+    let muted = false;
+    if (typeof mediaAttributes.rr_mediaMuted === 'boolean') {
+      muted = mediaAttributes.rr_mediaMuted;
+    } else {
+      muted = target.getAttribute('muted') !== null;
+    }
+
+    let loop = false;
+    if (typeof mediaAttributes.rr_mediaLoop === 'boolean') {
+      loop = mediaAttributes.rr_mediaLoop;
+    } else {
+      loop = target.getAttribute('loop') !== null;
+    }
+
+    let volume = 1;
+    if (typeof mediaAttributes.rr_mediaVolume === 'number') {
+      volume = mediaAttributes.rr_mediaVolume;
+    }
+
+    let currentTimeAtLastInteraction = 0;
+    if (typeof mediaAttributes.rr_mediaCurrentTime === 'number') {
+      currentTimeAtLastInteraction = mediaAttributes.rr_mediaCurrentTime;
+    }
+
+    this.mediaMap.set(target, {
+      isPlaying,
+      currentTimeAtLastInteraction,
+      lastInteractionTimeOffset: timeOffset,
+      playbackRate,
+      volume,
+      muted,
+      loop,
+    });
+    this.syncTargetWithState(target);
+  }
+
+  public mediaMutation({
+    target,
+    timeOffset,
+    mutation,
+  }: {
+    target: HTMLMediaElement | RRMediaElement;
+    timeOffset: number;
+    mutation: mediaInteractionData;
+  }) {
+    this.mediaMap.set(
+      target,
+      this.getMediaStateFromMutation({
+        target,
+        timeOffset,
+        mutation,
+      }),
+    );
+
+    this.syncTargetWithState(target);
+  }
+
+  public isSupportedMediaElement(node: Node): node is HTMLMediaElement {
+    return ['AUDIO', 'VIDEO'].includes(node.nodeName);
+  }
+
+  public reset() {
+    this.mediaMap.clear();
+  }
+}
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index e815ad753b..10ffb62b43 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -170,6 +170,7 @@ export type playerConfig = {
   root: Element;
   loadTimeout: number;
   skipInactive: boolean;
+  inactivePeriodThreshold: number;
   showWarning: boolean;
   showDebug: boolean;
   blockClass: string;
diff --git a/packages/rrweb/test/e2e/webgl.test.ts b/packages/rrweb/test/e2e/webgl.test.ts
index 09521b547d..769a6e0784 100644
--- a/packages/rrweb/test/e2e/webgl.test.ts
+++ b/packages/rrweb/test/e2e/webgl.test.ts
@@ -9,6 +9,8 @@ import {
   waitForRAF,
   generateRecordSnippet,
   ISuite,
+  hideMouseAnimation,
+  fakeGoto,
 } from '../utils';
 import type { recordOptions } from '../../src/types';
 import type { eventWithTime } from '@rrweb/types';
@@ -59,29 +61,6 @@ describe('e2e webgl', () => {
     );
   };
 
-  const fakeGoto = async (p: puppeteer.Page, url: string) => {
-    const intercept = async (request: puppeteer.HTTPRequest) => {
-      await request.respond({
-        status: 200,
-        contentType: 'text/html',
-        body: ' ', // non-empty string or page will load indefinitely
-      });
-    };
-    await p.setRequestInterception(true);
-    p.on('request', intercept);
-    await p.goto(url);
-    p.off('request', intercept);
-    await p.setRequestInterception(false);
-  };
-
-  const hideMouseAnimation = async (p: puppeteer.Page) => {
-    await p.addStyleTag({
-      content: `.replayer-mouse-tail{display: none !important;}
-                html, body { margin: 0; padding: 0; }
-                iframe { border: none; }`,
-    });
-  };
-
   it('will record and replay a webgl square', async () => {
     page = await browser.newPage();
     await fakeGoto(page, `${serverURL}/html/canvas-webgl-square.html`);
diff --git a/packages/rrweb/test/events/video-playback-on-full-snapshot.ts b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
new file mode 100644
index 0000000000..b1e8b12f5f
--- /dev/null
+++ b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
@@ -0,0 +1,550 @@
+import type { eventWithTime } from '@rrweb/types';
+
+const events: eventWithTime[] = [
+  { type: 0, data: {}, timestamp: 1900000001 },
+  { type: 1, data: {}, timestamp: 1900000132 },
+  {
+    type: 4,
+    data: {
+      href: 'http://127.0.0.1:5500/test/html/video.html',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 1900000132,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 5 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: { charset: 'UTF-8' },
+                    childNodes: [],
+                    id: 6,
+                  },
+                  { type: 3, textContent: '\n    ', id: 7 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      'http-equiv': 'X-UA-Compatible',
+                      content: 'IE=edge',
+                    },
+                    childNodes: [],
+                    id: 8,
+                  },
+                  { type: 3, textContent: '\n    ', id: 9 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      name: 'viewport',
+                      content: 'width=device-width, initial-scale=1.0',
+                    },
+                    childNodes: [],
+                    id: 10,
+                  },
+                  { type: 3, textContent: '\n    ', id: 11 },
+                  {
+                    type: 2,
+                    tagName: 'title',
+                    attributes: {},
+                    childNodes: [{ type: 3, textContent: 'Video', id: 13 }],
+                    id: 12,
+                  },
+                  { type: 3, textContent: '\n  ', id: 14 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: { type: 'text/javascript' },
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 16 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 17 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 18 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 19 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 20 },
+                    ],
+                    id: 15,
+                  },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 21 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 23 },
+                  {
+                    type: 2,
+                    tagName: 'h1',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'Big Buck Bunny', id: 25 },
+                    ],
+                    id: 24,
+                  },
+                  { type: 3, textContent: '\n    ', id: 26 },
+                  {
+                    type: 2,
+                    tagName: 'video',
+                    attributes: {
+                      muted: '',
+                      controls: '',
+                      loop: '',
+                      rr_mediaState: 'played',
+                      rr_mediaCurrentTime: 0,
+                      rr_mediaPlaybackRate: 1,
+                      rr_mediaMuted: true,
+                      rr_mediaVolume: 1,
+                      rr_mediaLoop: true,
+                    },
+                    childNodes: [
+                      { type: 3, textContent: '\n      ', id: 28 },
+                      {
+                        type: 2,
+                        tagName: 'source',
+                        attributes: {
+                          src: '/html/assets/bunny-video.webm',
+                          type: 'video/webm',
+                        },
+                        childNodes: [],
+                        id: 29,
+                      },
+                      {
+                        type: 3,
+                        textContent:
+                          '\n      Your browser does not support the video element.\n    ',
+                        id: 30,
+                      },
+                    ],
+                    id: 27,
+                  },
+                  { type: 3, textContent: '\n  ', id: 31 },
+                ],
+                id: 22,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 1900000136,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 955, y: 869, id: 3, timeOffset: 0 }] },
+    timestamp: 1900006165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 902, y: 823, id: 3, timeOffset: -451 },
+        { x: 840, y: 765, id: 3, timeOffset: -400 },
+        { x: 796, y: 724, id: 3, timeOffset: -350 },
+        { x: 716, y: 673, id: 3, timeOffset: -267 },
+        { x: 660, y: 645, id: 3, timeOffset: -217 },
+        { x: 554, y: 593, id: 3, timeOffset: -167 },
+        { x: 466, y: 518, id: 3, timeOffset: -101 },
+        { x: 433, y: 413, id: 27, timeOffset: -51 },
+        { x: 432, y: 316, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900006665,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 444, y: 229, id: 27, timeOffset: -435 },
+        { x: 444, y: 210, id: 27, timeOffset: -385 },
+        { x: 444, y: 209, id: 27, timeOffset: -335 },
+        { x: 445, y: 214, id: 27, timeOffset: -235 },
+        { x: 460, y: 246, id: 27, timeOffset: -185 },
+        { x: 476, y: 273, id: 27, timeOffset: -134 },
+        { x: 482, y: 281, id: 27, timeOffset: -84 },
+      ],
+    },
+    timestamp: 1900007166,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 483, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900007814,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 483, y: 281, id: 27, timeOffset: -417 },
+        { x: 484, y: 282, id: 27, timeOffset: -218 },
+      ],
+    },
+    timestamp: 1900008315,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 484, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900010165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 484, y: 281, id: 27, timeOffset: -322 },
+        { x: 485, y: 281, id: 27, timeOffset: -256 },
+        { x: 491, y: 282, id: 27, timeOffset: -205 },
+        { x: 515, y: 283, id: 27, timeOffset: -156 },
+        { x: 534, y: 285, id: 27, timeOffset: -106 },
+        { x: 562, y: 291, id: 27, timeOffset: -56 },
+        { x: 575, y: 295, id: 27, timeOffset: -6 },
+      ],
+    },
+    timestamp: 1900010670,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 576, y: 296, id: 27, timeOffset: 0 }] },
+    timestamp: 1900012714,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 576, y: 298, id: 27, timeOffset: -451 },
+        { x: 577, y: 301, id: 27, timeOffset: -400 },
+        { x: 578, y: 305, id: 27, timeOffset: -334 },
+        { x: 580, y: 313, id: 27, timeOffset: -284 },
+        { x: 582, y: 332, id: 27, timeOffset: -234 },
+        { x: 585, y: 346, id: 27, timeOffset: -184 },
+        { x: 587, y: 353, id: 27, timeOffset: -133 },
+      ],
+    },
+    timestamp: 1900013215,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 587, y: 354, id: 27, timeOffset: -253 }],
+    },
+    timestamp: 1900013717,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 587, y: 355, id: 27, timeOffset: 0 }] },
+    timestamp: 1900014364,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 588, y: 358, id: 27, timeOffset: -451 },
+        { x: 589, y: 368, id: 27, timeOffset: -400 },
+        { x: 592, y: 386, id: 27, timeOffset: -334 },
+        { x: 596, y: 402, id: 27, timeOffset: -266 },
+        { x: 597, y: 410, id: 27, timeOffset: -202 },
+        { x: 595, y: 415, id: 27, timeOffset: -152 },
+        { x: 591, y: 417, id: 27, timeOffset: -101 },
+        { x: 585, y: 418, id: 27, timeOffset: -51 },
+        { x: 579, y: 418, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900014865,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 562, y: 420, id: 27, timeOffset: -433 },
+        { x: 547, y: 422, id: 27, timeOffset: -367 },
+        { x: 538, y: 423, id: 27, timeOffset: -317 },
+        { x: 525, y: 423, id: 27, timeOffset: -251 },
+        { x: 509, y: 423, id: 27, timeOffset: -201 },
+        { x: 488, y: 422, id: 27, timeOffset: -151 },
+        { x: 440, y: 421, id: 27, timeOffset: -101 },
+        { x: 373, y: 419, id: 27, timeOffset: -51 },
+        { x: 296, y: 415, id: 27, timeOffset: -1 },
+      ],
+    },
+    timestamp: 1900015365,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 225, y: 409, id: 27, timeOffset: -439 },
+        { x: 183, y: 408, id: 27, timeOffset: -389 },
+        { x: 138, y: 407, id: 27, timeOffset: -340 },
+        { x: 98, y: 406, id: 27, timeOffset: -290 },
+        { x: 79, y: 406, id: 27, timeOffset: -238 },
+        { x: 60, y: 406, id: 27, timeOffset: -173 },
+        { x: 53, y: 406, id: 27, timeOffset: -122 },
+        { x: 39, y: 405, id: 27, timeOffset: -55 },
+      ],
+    },
+    timestamp: 1900015870,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 34, y: 403, id: 27, timeOffset: -493 },
+        { x: 31, y: 401, id: 27, timeOffset: -442 },
+        { x: 29, y: 399, id: 27, timeOffset: -375 },
+        { x: 28, y: 399, id: 27, timeOffset: -325 },
+        { x: 28, y: 397, id: 27, timeOffset: -259 },
+        { x: 28, y: 394, id: 27, timeOffset: -209 },
+        { x: 28, y: 394, id: 27, timeOffset: -159 },
+        { x: 28, y: 393, id: 27, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900016373,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 29, y: 393, id: 27, timeOffset: 0 }] },
+    timestamp: 1900018598,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 391, id: 27, timeOffset: -433 },
+        { x: 31, y: 392, id: 27, timeOffset: -251 },
+        { x: 30, y: 393, id: 27, timeOffset: -201 },
+        { x: 30, y: 394, id: 27, timeOffset: -151 },
+      ],
+    },
+    timestamp: 1900019098,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 394, id: 27, timeOffset: -457 },
+        { x: 30, y: 394, id: 27, timeOffset: -391 },
+      ],
+    },
+    timestamp: 1900019605,
+  },
+  { type: 3, data: { source: 2, type: 5, id: 27 }, timestamp: 1900020571 },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 32, y: 394, id: 27, timeOffset: 0 }] },
+    timestamp: 1900021531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 48, y: 394, id: 27, timeOffset: -449 },
+        { x: 286, y: 413, id: 27, timeOffset: -384 },
+        { x: 418, y: 419, id: 27, timeOffset: -334 },
+        { x: 474, y: 419, id: 27, timeOffset: -284 },
+        { x: 482, y: 418, id: 27, timeOffset: -233 },
+        { x: 482, y: 417, id: 27, timeOffset: -167 },
+        { x: 477, y: 416, id: 27, timeOffset: -116 },
+        { x: 439, y: 414, id: 27, timeOffset: -51 },
+        { x: 402, y: 412, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022031,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 376, y: 413, id: 27, timeOffset: -450 },
+        { x: 366, y: 414, id: 27, timeOffset: -400 },
+        { x: 353, y: 416, id: 27, timeOffset: -334 },
+        { x: 346, y: 417, id: 27, timeOffset: -283 },
+        { x: 339, y: 419, id: 27, timeOffset: -233 },
+        { x: 322, y: 422, id: 27, timeOffset: -167 },
+        { x: 311, y: 422, id: 27, timeOffset: -117 },
+        { x: 308, y: 422, id: 27, timeOffset: -51 },
+        { x: 311, y: 420, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 315, y: 419, id: 27, timeOffset: -448 },
+        { x: 316, y: 418, id: 27, timeOffset: -397 },
+        { x: 317, y: 417, id: 27, timeOffset: -347 },
+        { x: 317, y: 417, id: 27, timeOffset: -281 },
+      ],
+    },
+    timestamp: 1900023045,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 318, y: 418, id: 27, timeOffset: -466 },
+        { x: 326, y: 439, id: 27, timeOffset: -416 },
+        { x: 333, y: 473, id: 3, timeOffset: -365 },
+        { x: 334, y: 484, id: 3, timeOffset: -300 },
+        { x: 334, y: 485, id: 3, timeOffset: -50 },
+      ],
+    },
+    timestamp: 1900023547,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 333, y: 485, id: 3, timeOffset: -483 },
+        { x: 321, y: 481, id: 3, timeOffset: -433 },
+        { x: 265, y: 460, id: 3, timeOffset: -383 },
+        { x: 203, y: 433, id: 27, timeOffset: -332 },
+        { x: 135, y: 402, id: 27, timeOffset: -283 },
+        { x: 86, y: 387, id: 27, timeOffset: -216 },
+        { x: 70, y: 384, id: 27, timeOffset: -166 },
+        { x: 58, y: 381, id: 27, timeOffset: -100 },
+        { x: 53, y: 381, id: 27, timeOffset: -33 },
+      ],
+    },
+    timestamp: 1900024047,
+  },
+
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 49, y: 383, id: 27, timeOffset: -468 },
+        { x: 39, y: 387, id: 27, timeOffset: -418 },
+        { x: 31, y: 389, id: 27, timeOffset: -367 },
+        { x: 28, y: 390, id: 27, timeOffset: -301 },
+      ],
+    },
+    timestamp: 1900024548,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 28, y: 390, id: 27, timeOffset: 0 }] },
+    timestamp: 1900034631,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 29, y: 393, id: 27, timeOffset: -459 },
+        { x: 262, y: 474, id: 3, timeOffset: -376 },
+        { x: 562, y: 573, id: 3, timeOffset: -326 },
+        { x: 702, y: 603, id: 3, timeOffset: -260 },
+        { x: 714, y: 603, id: 3, timeOffset: -209 },
+        { x: 716, y: 600, id: 3, timeOffset: -159 },
+        { x: 717, y: 597, id: 3, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900035140,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 718, y: 596, id: 3, timeOffset: 0 }] },
+    timestamp: 1900035963,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 719, y: 594, id: 3, timeOffset: -451 }],
+    },
+    timestamp: 1900036464,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 722, y: 594, id: 3, timeOffset: 0 }] },
+    timestamp: 1900037931,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 772, y: 588, id: 3, timeOffset: -438 },
+        { x: 850, y: 577, id: 3, timeOffset: -371 },
+        { x: 879, y: 576, id: 3, timeOffset: -321 },
+        { x: 914, y: 576, id: 3, timeOffset: -255 },
+        { x: 926, y: 577, id: 3, timeOffset: -205 },
+        { x: 932, y: 579, id: 3, timeOffset: -154 },
+        { x: 935, y: 582, id: 3, timeOffset: -88 },
+        { x: 945, y: 587, id: 3, timeOffset: -22 },
+      ],
+    },
+    timestamp: 1900038435,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 966, y: 593, id: 3, timeOffset: -483 },
+        { x: 1006, y: 601, id: 3, timeOffset: -433 },
+        { x: 1075, y: 608, id: 3, timeOffset: -383 },
+        { x: 1098, y: 610, id: 3, timeOffset: -333 },
+        { x: 1102, y: 611, id: 3, timeOffset: -283 },
+        { x: 1102, y: 611, id: 3, timeOffset: -217 },
+        { x: 1103, y: 612, id: 3, timeOffset: -166 },
+        { x: 1103, y: 616, id: 3, timeOffset: -100 },
+      ],
+    },
+    timestamp: 1900038947,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 1103, y: 616, id: 3, timeOffset: -151 },
+        { x: 1103, y: 616, id: 3, timeOffset: -52 },
+        { x: 1103, y: 614, id: 3, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900039448,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/events/video-playback.ts b/packages/rrweb/test/events/video-playback.ts
new file mode 100644
index 0000000000..b29841b66e
--- /dev/null
+++ b/packages/rrweb/test/events/video-playback.ts
@@ -0,0 +1,628 @@
+import type { eventWithTime } from '@rrweb/types';
+
+const events: eventWithTime[] = [
+  { type: 0, data: {}, timestamp: 1900000001 },
+  { type: 1, data: {}, timestamp: 1900000132 },
+  {
+    type: 4,
+    data: {
+      href: 'http://127.0.0.1:5500/test/html/video.html',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 1900000132,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 5 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: { charset: 'UTF-8' },
+                    childNodes: [],
+                    id: 6,
+                  },
+                  { type: 3, textContent: '\n    ', id: 7 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      'http-equiv': 'X-UA-Compatible',
+                      content: 'IE=edge',
+                    },
+                    childNodes: [],
+                    id: 8,
+                  },
+                  { type: 3, textContent: '\n    ', id: 9 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      name: 'viewport',
+                      content: 'width=device-width, initial-scale=1.0',
+                    },
+                    childNodes: [],
+                    id: 10,
+                  },
+                  { type: 3, textContent: '\n    ', id: 11 },
+                  {
+                    type: 2,
+                    tagName: 'title',
+                    attributes: {},
+                    childNodes: [{ type: 3, textContent: 'Video', id: 13 }],
+                    id: 12,
+                  },
+                  { type: 3, textContent: '\n  ', id: 14 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: { type: 'text/javascript' },
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 16 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 17 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 18 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 19 },
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 20 },
+                    ],
+                    id: 15,
+                  },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 21 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 23 },
+                  {
+                    type: 2,
+                    tagName: 'h1',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'Big Buck Bunny', id: 25 },
+                    ],
+                    id: 24,
+                  },
+                  { type: 3, textContent: '\n    ', id: 26 },
+                  {
+                    type: 2,
+                    tagName: 'video',
+                    attributes: {
+                      muted: '',
+                      controls: '',
+                      rr_mediaState: 'played',
+                      rr_mediaCurrentTime: 0,
+                      rr_mediaPlaybackRate: 1,
+                      rr_mediaMuted: true,
+                      rr_mediaVolume: 1,
+                    },
+                    childNodes: [
+                      { type: 3, textContent: '\n      ', id: 28 },
+                      {
+                        type: 2,
+                        tagName: 'source',
+                        attributes: {
+                          src: '/html/assets/bunny-video.webm',
+                          type: 'video/webm',
+                        },
+                        childNodes: [],
+                        id: 29,
+                      },
+                      {
+                        type: 3,
+                        textContent:
+                          '\n      Your browser does not support the video element.\n    ',
+                        id: 30,
+                      },
+                    ],
+                    id: 27,
+                  },
+                  { type: 3, textContent: '\n  ', id: 31 },
+                  {
+                    type: 5,
+                    textContent: ' Code injected by live-server ',
+                    id: 32,
+                  },
+                  { type: 3, textContent: '\n', id: 33 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 35 },
+                    ],
+                    id: 34,
+                  },
+                  { type: 3, textContent: '\n\n\n', id: 36 },
+                ],
+                id: 22,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 1900000136,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 0,
+      id: 27,
+      currentTime: 0.000322,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900001500,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 955, y: 869, id: 3, timeOffset: 0 }] },
+    timestamp: 1900006165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 902, y: 823, id: 3, timeOffset: -451 },
+        { x: 840, y: 765, id: 3, timeOffset: -400 },
+        { x: 796, y: 724, id: 3, timeOffset: -350 },
+        { x: 716, y: 673, id: 3, timeOffset: -267 },
+        { x: 660, y: 645, id: 3, timeOffset: -217 },
+        { x: 554, y: 593, id: 3, timeOffset: -167 },
+        { x: 466, y: 518, id: 3, timeOffset: -101 },
+        { x: 433, y: 413, id: 27, timeOffset: -51 },
+        { x: 432, y: 316, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900006665,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 444, y: 229, id: 27, timeOffset: -435 },
+        { x: 444, y: 210, id: 27, timeOffset: -385 },
+        { x: 444, y: 209, id: 27, timeOffset: -335 },
+        { x: 445, y: 214, id: 27, timeOffset: -235 },
+        { x: 460, y: 246, id: 27, timeOffset: -185 },
+        { x: 476, y: 273, id: 27, timeOffset: -134 },
+        { x: 482, y: 281, id: 27, timeOffset: -84 },
+      ],
+    },
+    timestamp: 1900007166,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 483, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900007814,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 483, y: 281, id: 27, timeOffset: -417 },
+        { x: 484, y: 282, id: 27, timeOffset: -218 },
+      ],
+    },
+    timestamp: 1900008315,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 484, y: 281, id: 27, timeOffset: 0 }] },
+    timestamp: 1900010165,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 484, y: 281, id: 27, timeOffset: -322 },
+        { x: 485, y: 281, id: 27, timeOffset: -256 },
+        { x: 491, y: 282, id: 27, timeOffset: -205 },
+        { x: 515, y: 283, id: 27, timeOffset: -156 },
+        { x: 534, y: 285, id: 27, timeOffset: -106 },
+        { x: 562, y: 291, id: 27, timeOffset: -56 },
+        { x: 575, y: 295, id: 27, timeOffset: -6 },
+      ],
+    },
+    timestamp: 1900010670,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 576, y: 296, id: 27, timeOffset: 0 }] },
+    timestamp: 1900012714,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 576, y: 298, id: 27, timeOffset: -451 },
+        { x: 577, y: 301, id: 27, timeOffset: -400 },
+        { x: 578, y: 305, id: 27, timeOffset: -334 },
+        { x: 580, y: 313, id: 27, timeOffset: -284 },
+        { x: 582, y: 332, id: 27, timeOffset: -234 },
+        { x: 585, y: 346, id: 27, timeOffset: -184 },
+        { x: 587, y: 353, id: 27, timeOffset: -133 },
+      ],
+    },
+    timestamp: 1900013215,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 587, y: 354, id: 27, timeOffset: -253 }],
+    },
+    timestamp: 1900013717,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 587, y: 355, id: 27, timeOffset: 0 }] },
+    timestamp: 1900014364,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 588, y: 358, id: 27, timeOffset: -451 },
+        { x: 589, y: 368, id: 27, timeOffset: -400 },
+        { x: 592, y: 386, id: 27, timeOffset: -334 },
+        { x: 596, y: 402, id: 27, timeOffset: -266 },
+        { x: 597, y: 410, id: 27, timeOffset: -202 },
+        { x: 595, y: 415, id: 27, timeOffset: -152 },
+        { x: 591, y: 417, id: 27, timeOffset: -101 },
+        { x: 585, y: 418, id: 27, timeOffset: -51 },
+        { x: 579, y: 418, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900014865,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 562, y: 420, id: 27, timeOffset: -433 },
+        { x: 547, y: 422, id: 27, timeOffset: -367 },
+        { x: 538, y: 423, id: 27, timeOffset: -317 },
+        { x: 525, y: 423, id: 27, timeOffset: -251 },
+        { x: 509, y: 423, id: 27, timeOffset: -201 },
+        { x: 488, y: 422, id: 27, timeOffset: -151 },
+        { x: 440, y: 421, id: 27, timeOffset: -101 },
+        { x: 373, y: 419, id: 27, timeOffset: -51 },
+        { x: 296, y: 415, id: 27, timeOffset: -1 },
+      ],
+    },
+    timestamp: 1900015365,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 225, y: 409, id: 27, timeOffset: -439 },
+        { x: 183, y: 408, id: 27, timeOffset: -389 },
+        { x: 138, y: 407, id: 27, timeOffset: -340 },
+        { x: 98, y: 406, id: 27, timeOffset: -290 },
+        { x: 79, y: 406, id: 27, timeOffset: -238 },
+        { x: 60, y: 406, id: 27, timeOffset: -173 },
+        { x: 53, y: 406, id: 27, timeOffset: -122 },
+        { x: 39, y: 405, id: 27, timeOffset: -55 },
+      ],
+    },
+    timestamp: 1900015870,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 34, y: 403, id: 27, timeOffset: -493 },
+        { x: 31, y: 401, id: 27, timeOffset: -442 },
+        { x: 29, y: 399, id: 27, timeOffset: -375 },
+        { x: 28, y: 399, id: 27, timeOffset: -325 },
+        { x: 28, y: 397, id: 27, timeOffset: -259 },
+        { x: 28, y: 394, id: 27, timeOffset: -209 },
+        { x: 28, y: 394, id: 27, timeOffset: -159 },
+        { x: 28, y: 393, id: 27, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900016373,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 29, y: 393, id: 27, timeOffset: 0 }] },
+    timestamp: 1900018598,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 391, id: 27, timeOffset: -433 },
+        { x: 31, y: 392, id: 27, timeOffset: -251 },
+        { x: 30, y: 393, id: 27, timeOffset: -201 },
+        { x: 30, y: 394, id: 27, timeOffset: -151 },
+      ],
+    },
+    timestamp: 1900019098,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 30, y: 394, id: 27, timeOffset: -457 },
+        { x: 30, y: 394, id: 27, timeOffset: -391 },
+      ],
+    },
+    timestamp: 1900019605,
+  },
+  { type: 3, data: { source: 2, type: 5, id: 27 }, timestamp: 1900020571 },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 1,
+      id: 27,
+      currentTime: 20.088367,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900020661,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 32, y: 394, id: 27, timeOffset: 0 }] },
+    timestamp: 1900021531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 48, y: 394, id: 27, timeOffset: -449 },
+        { x: 286, y: 413, id: 27, timeOffset: -384 },
+        { x: 418, y: 419, id: 27, timeOffset: -334 },
+        { x: 474, y: 419, id: 27, timeOffset: -284 },
+        { x: 482, y: 418, id: 27, timeOffset: -233 },
+        { x: 482, y: 417, id: 27, timeOffset: -167 },
+        { x: 477, y: 416, id: 27, timeOffset: -116 },
+        { x: 439, y: 414, id: 27, timeOffset: -51 },
+        { x: 402, y: 412, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022031,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 376, y: 413, id: 27, timeOffset: -450 },
+        { x: 366, y: 414, id: 27, timeOffset: -400 },
+        { x: 353, y: 416, id: 27, timeOffset: -334 },
+        { x: 346, y: 417, id: 27, timeOffset: -283 },
+        { x: 339, y: 419, id: 27, timeOffset: -233 },
+        { x: 322, y: 422, id: 27, timeOffset: -167 },
+        { x: 311, y: 422, id: 27, timeOffset: -117 },
+        { x: 308, y: 422, id: 27, timeOffset: -51 },
+        { x: 311, y: 420, id: 27, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900022531,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 2,
+      id: 27,
+      currentTime: 9.744288,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 19000602896,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 315, y: 419, id: 27, timeOffset: -448 },
+        { x: 316, y: 418, id: 27, timeOffset: -397 },
+        { x: 317, y: 417, id: 27, timeOffset: -347 },
+        { x: 317, y: 417, id: 27, timeOffset: -281 },
+      ],
+    },
+    timestamp: 1900023045,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 318, y: 418, id: 27, timeOffset: -466 },
+        { x: 326, y: 439, id: 27, timeOffset: -416 },
+        { x: 333, y: 473, id: 3, timeOffset: -365 },
+        { x: 334, y: 484, id: 3, timeOffset: -300 },
+        { x: 334, y: 485, id: 3, timeOffset: -50 },
+      ],
+    },
+    timestamp: 1900023547,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 333, y: 485, id: 3, timeOffset: -483 },
+        { x: 321, y: 481, id: 3, timeOffset: -433 },
+        { x: 265, y: 460, id: 3, timeOffset: -383 },
+        { x: 203, y: 433, id: 27, timeOffset: -332 },
+        { x: 135, y: 402, id: 27, timeOffset: -283 },
+        { x: 86, y: 387, id: 27, timeOffset: -216 },
+        { x: 70, y: 384, id: 27, timeOffset: -166 },
+        { x: 58, y: 381, id: 27, timeOffset: -100 },
+        { x: 53, y: 381, id: 27, timeOffset: -33 },
+      ],
+    },
+    timestamp: 1900024047,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 0,
+      id: 27,
+      currentTime: 9.744632,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900024475,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 49, y: 383, id: 27, timeOffset: -468 },
+        { x: 39, y: 387, id: 27, timeOffset: -418 },
+        { x: 31, y: 389, id: 27, timeOffset: -367 },
+        { x: 28, y: 390, id: 27, timeOffset: -301 },
+      ],
+    },
+    timestamp: 1900024548,
+  },
+  {
+    type: 3,
+    data: {
+      source: 7,
+      type: 1,
+      id: 27,
+      currentTime: 19.704312,
+      volume: 1,
+      muted: true,
+      playbackRate: 1,
+    },
+    timestamp: 1900034476,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 28, y: 390, id: 27, timeOffset: 0 }] },
+    timestamp: 1900034631,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 29, y: 393, id: 27, timeOffset: -459 },
+        { x: 262, y: 474, id: 3, timeOffset: -376 },
+        { x: 562, y: 573, id: 3, timeOffset: -326 },
+        { x: 702, y: 603, id: 3, timeOffset: -260 },
+        { x: 714, y: 603, id: 3, timeOffset: -209 },
+        { x: 716, y: 600, id: 3, timeOffset: -159 },
+        { x: 717, y: 597, id: 3, timeOffset: -109 },
+      ],
+    },
+    timestamp: 1900035140,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 718, y: 596, id: 3, timeOffset: 0 }] },
+    timestamp: 1900035963,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [{ x: 719, y: 594, id: 3, timeOffset: -451 }],
+    },
+    timestamp: 1900036464,
+  },
+  {
+    type: 3,
+    data: { source: 1, positions: [{ x: 722, y: 594, id: 3, timeOffset: 0 }] },
+    timestamp: 1900037931,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 772, y: 588, id: 3, timeOffset: -438 },
+        { x: 850, y: 577, id: 3, timeOffset: -371 },
+        { x: 879, y: 576, id: 3, timeOffset: -321 },
+        { x: 914, y: 576, id: 3, timeOffset: -255 },
+        { x: 926, y: 577, id: 3, timeOffset: -205 },
+        { x: 932, y: 579, id: 3, timeOffset: -154 },
+        { x: 935, y: 582, id: 3, timeOffset: -88 },
+        { x: 945, y: 587, id: 3, timeOffset: -22 },
+      ],
+    },
+    timestamp: 1900038435,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 966, y: 593, id: 3, timeOffset: -483 },
+        { x: 1006, y: 601, id: 3, timeOffset: -433 },
+        { x: 1075, y: 608, id: 3, timeOffset: -383 },
+        { x: 1098, y: 610, id: 3, timeOffset: -333 },
+        { x: 1102, y: 611, id: 3, timeOffset: -283 },
+        { x: 1102, y: 611, id: 3, timeOffset: -217 },
+        { x: 1103, y: 612, id: 3, timeOffset: -166 },
+        { x: 1103, y: 616, id: 3, timeOffset: -100 },
+      ],
+    },
+    timestamp: 1900038947,
+  },
+  {
+    type: 3,
+    data: {
+      source: 1,
+      positions: [
+        { x: 1103, y: 616, id: 3, timeOffset: -151 },
+        { x: 1103, y: 616, id: 3, timeOffset: -52 },
+        { x: 1103, y: 614, id: 3, timeOffset: 0 },
+      ],
+    },
+    timestamp: 1900039448,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/html/assets/bunny-video.webm b/packages/rrweb/test/html/assets/bunny-video.webm
new file mode 100644
index 0000000000..2a7fc3a63a
Binary files /dev/null and b/packages/rrweb/test/html/assets/bunny-video.webm differ
diff --git a/packages/rrweb/test/html/video.html b/packages/rrweb/test/html/video.html
new file mode 100644
index 0000000000..0506aee9d4
--- /dev/null
+++ b/packages/rrweb/test/html/video.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Video</title>
+  </head>
+  <body>
+    <h1>Big Buck Bunny</h1>
+    <video muted controls>
+      <source src="assets/bunny-video.webm" type="video/webm" />
+      Your browser does not support the video element.
+    </video>
+  </body>
+  <script>
+    document.querySelector('video').currentTime = 5;
+  </script>
+</html>
diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
index a296b53be8..e160fb38d6 100644
--- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
+++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -263,7 +263,11 @@ exports[`cross origin iframes audio.html should emit contents of iframe once 1`]
                         \\"attributes\\": {
                           \\"controls\\": \\"\\",
                           \\"rr_mediaState\\": \\"paused\\",
-                          \\"rr_mediaCurrentTime\\": 0
+                          \\"rr_mediaCurrentTime\\": 0,
+                          \\"rr_mediaPlaybackRate\\": 1,
+                          \\"rr_mediaMuted\\": false,
+                          \\"rr_mediaLoop\\": false,
+                          \\"rr_mediaVolume\\": 1
                         },
                         \\"childNodes\\": [
                           {
@@ -327,7 +331,8 @@ exports[`cross origin iframes audio.html should emit contents of iframe once 1`]
       \\"currentTime\\": 0,
       \\"volume\\": 1,
       \\"muted\\": false,
-      \\"playbackRate\\": 1
+      \\"playbackRate\\": 1,
+      \\"loop\\": false
     }
   }
 ]"
diff --git a/packages/rrweb/test/replay/ video.test.ts b/packages/rrweb/test/replay/ video.test.ts
new file mode 100644
index 0000000000..6950f0e10f
--- /dev/null
+++ b/packages/rrweb/test/replay/ video.test.ts	
@@ -0,0 +1,240 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import type * as puppeteer from 'puppeteer';
+import {
+  startServer,
+  launchPuppeteer,
+  getServerURL,
+  waitForRAF,
+  ISuite,
+  hideMouseAnimation,
+  fakeGoto,
+} from '../utils';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import videoPlaybackEvents from '../events/video-playback';
+import videoPlaybackOnFullSnapshotEvents from '../events/video-playback-on-full-snapshot';
+expect.extend({ toMatchImageSnapshot });
+
+describe('video', () => {
+  jest.setTimeout(100_000);
+  let code: ISuite['code'];
+  let page: ISuite['page'];
+  let browser: ISuite['browser'];
+  let server: ISuite['server'];
+  let serverURL: ISuite['serverURL'];
+
+  beforeAll(async () => {
+    server = await startServer();
+    serverURL = getServerURL(server);
+    browser = await launchPuppeteer();
+
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
+    code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await server.close();
+    await browser.close();
+  });
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+
+    await fakeGoto(page, `${serverURL}/html/video.html`);
+    await page.evaluate(code);
+    await waitForRAF(page);
+    await hideMouseAnimation(page);
+  });
+
+  it('will seek to the correct moment', async () => {
+    await page.evaluate(`let events = ${JSON.stringify(videoPlaybackEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+    `);
+    await waitForRAF(page);
+    await page.evaluate(`
+      window.replayer.pause(6500);
+    `);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+  });
+
+  it('will seek to the correct moment without media interaction events', async () => {
+    await page.evaluate(`
+      let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)};
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.pause(6500);
+    `);
+
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+  });
+
+  it("will be paused when the player wasn't started yet", async () => {
+    await page.evaluate(`
+      let events = ${JSON.stringify(videoPlaybackEvents)};
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+    `);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+  });
+
+  it('will play from the correct moment', async () => {
+    await page.evaluate(`let events = ${JSON.stringify(videoPlaybackEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events, {
+        UNSAFE_replayCanvas: true,
+      });
+    `);
+    await waitForRAF(page);
+    await page.evaluate(`
+      window.replayer.play(6500);
+    `);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const frameImage = await page!.screenshot();
+    await waitForRAF(page);
+    expect(frameImage).toMatchImageSnapshot({
+      failureThreshold: 0.05,
+      failureThresholdType: 'percent',
+    });
+
+    // TODO: check to see if video is same as basic replay
+  });
+
+  it('should play from the start', async () => {
+    await page.evaluate(`let events = ${JSON.stringify(videoPlaybackEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.play();
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const isPlaying = await page.evaluate(`
+      !document.querySelector('iframe').contentDocument.querySelector('video').paused && 
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime !== 0 && 
+      !document.querySelector('iframe').contentDocument.querySelector('video').ended;
+    `);
+    expect(isPlaying).toBe(true);
+  });
+
+  it('should play from the start without media events', async () => {
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.play();
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const isPlaying = await page.evaluate(`
+      !document.querySelector('iframe').contentDocument.querySelector('video').paused && 
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime !== 0 && 
+      !document.querySelector('iframe').contentDocument.querySelector('video').ended;
+    `);
+    expect(isPlaying).toBe(true);
+  });
+
+  it('should report the correct time for looping videos that have passed their total time', async () => {
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+    await page.evaluate(`
+    window.replayer.pause(25000); // 5 seconds after the video started a new loop
+    `);
+    await waitForRAF(page);
+
+    const time = await page.evaluate(`
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime;
+    `);
+    expect(time).toBeCloseTo(5, 0);
+  });
+
+  it('should set the correct time on loading videos', async () => {
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events);
+      window.replayer.pause(25000); // 5 seconds after the video started a new loop
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const time = await page.evaluate(`
+      document.querySelector('iframe').contentDocument.querySelector('video').currentTime;
+    `);
+    expect(time).toBeCloseTo(5, 0);
+  });
+
+  it('should set the correct playbackRate on faster playback', async () => {
+    page.on('console', (msg) => {
+      console.log(msg.text());
+    });
+    await page.evaluate(
+      `let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)}`,
+    );
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      window.replayer = new Replayer(events, {
+        speed: 8,
+      });
+      window.replayer.play();
+    `);
+    await waitForRAF(page);
+    await page.waitForNetworkIdle();
+    await waitForRAF(page);
+
+    const time = await page.evaluate(`
+      document.querySelector('iframe').contentDocument.querySelector('video').playbackRate;
+    `);
+    expect(time).toBe(8);
+  });
+});
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png
new file mode 100644
index 0000000000..b35e4648a3
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png differ
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png
new file mode 100644
index 0000000000..d3247cd523
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png differ
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png
new file mode 100644
index 0000000000..f3e38918c5
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png differ
diff --git a/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png
new file mode 100644
index 0000000000..38943d8a2f
Binary files /dev/null and b/packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png differ
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index 6cd93281f9..30a36abfcb 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -3,10 +3,10 @@ import {
   EventType,
   IncrementalSource,
   eventWithTime,
+  eventWithoutTime,
   MouseInteractions,
   Optional,
   mouseInteractionData,
-  event,
   pluginEvent,
 } from '@rrweb/types';
 import type { recordOptions } from '../src/types';
@@ -50,6 +50,7 @@ export const startServer = (defaultPort: number = 3030) =>
       '.html': 'text/html',
       '.js': 'text/javascript',
       '.css': 'text/css',
+      '.webm': 'video/webm',
     };
     const s = http.createServer((req, res) => {
       const parsedUrl = url.parse(req.url!);
@@ -69,6 +70,7 @@ export const startServer = (defaultPort: number = 3030) =>
         res.setHeader('Access-Control-Allow-Origin', '*');
         res.setHeader('Access-Control-Allow-Methods', 'GET');
         res.setHeader('Access-Control-Allow-Headers', 'Content-type');
+        if (ext === '.webm') res.setHeader('Accept-Ranges', 'bytes');
         setTimeout(() => {
           res.end(data);
           // mock delay
@@ -226,7 +228,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           }
         }
         delete (s as Optional<eventWithTime, 'timestamp'>).timestamp;
-        return s as event;
+        return s as eventWithoutTime;
       }),
     null,
     2,
@@ -703,3 +705,26 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
   });
   `;
 }
+
+export async function hideMouseAnimation(p: puppeteer.Page): Promise<void> {
+  await p.addStyleTag({
+    content: `.replayer-mouse-tail{display: none !important;}
+                html, body { margin: 0; padding: 0; }
+                iframe { border: none; }`,
+  });
+}
+
+export const fakeGoto = async (p: puppeteer.Page, url: string) => {
+  const intercept = async (request: puppeteer.HTTPRequest) => {
+    await request.respond({
+      status: 200,
+      contentType: 'text/html',
+      body: ' ', // non-empty string or page will load indefinitely
+    });
+  };
+  await p.setRequestInterception(true);
+  p.on('request', intercept);
+  await p.goto(url);
+  p.off('request', intercept);
+  await p.setRequestInterception(false);
+};
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 6a9c4a2fa7..e0966d11bc 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @rrweb/types
 
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- [#1432](https://github.com/rrweb-io/rrweb/pull/1432) [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961) Thanks [@Juice10](https://github.com/Juice10)! - Add `loop` to `mediaInteractionParam`
+
+- [#1369](https://github.com/rrweb-io/rrweb/pull/1369) [`c278d06`](https://github.com/rrweb-io/rrweb/commit/c278d068a0e2f1175cce7cc63920ac1fbf4783cf) Thanks [@stefansundin](https://github.com/stefansundin)! - Fix type error when using `"moduleResolution": "NodeNext"`.
+
+- Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356)]:
+  - rrweb-snapshot@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- Updated dependencies [[`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f), [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8), [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b), [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81), [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817), [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882), [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e)]:
+  - rrweb-snapshot@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/types/package.json b/packages/types/package.json
index d3d376e0f2..2d61372168 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rrweb/types",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "publishConfig": {
     "access": "public"
   },
@@ -30,6 +30,7 @@
   "typings": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/types.js",
       "require": "./dist/types.umd.cjs"
     }
@@ -43,7 +44,7 @@
     "vite-plugin-dts": "^1.7.3"
   },
   "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.11"
+    "rrweb-snapshot": "^2.0.0-alpha.13"
   },
   "browserslist": [
     "supports es6-class"
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index c41d3e97ff..0476ce2d68 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -163,7 +163,7 @@ export type incrementalData =
   | adoptedStyleSheetData
   | customElementData;
 
-export type event =
+export type eventWithoutTime =
   | domContentLoadedEvent
   | loadedEvent
   | fullSnapshotEvent
@@ -172,7 +172,13 @@ export type event =
   | customEvent
   | pluginEvent;
 
-export type eventWithTime = event & {
+/**
+ * @deprecated intended for internal use
+ * a synonym for eventWithoutTime
+ */
+export type event = eventWithoutTime;
+
+export type eventWithTime = eventWithoutTime & {
   timestamp: number;
   delay?: number;
 };
@@ -573,6 +579,7 @@ export type mediaInteractionParam = {
   currentTime?: number;
   volume?: number;
   muted?: boolean;
+  loop?: boolean;
   playbackRate?: number;
 };
 
@@ -653,6 +660,9 @@ export type Arguments<T> = T extends (...payload: infer U) => unknown
 export enum ReplayerEvents {
   Start = 'start',
   Pause = 'pause',
+  /**
+   * @deprecated use Play instead
+   */
   Resume = 'resume',
   Resize = 'resize',
   Finish = 'finish',
diff --git a/packages/web-extension/CHANGELOG.md b/packages/web-extension/CHANGELOG.md
index 5f70ed0631..0e09b1fa4b 100644
--- a/packages/web-extension/CHANGELOG.md
+++ b/packages/web-extension/CHANGELOG.md
@@ -1,5 +1,29 @@
 # @rrweb/web-extension
 
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- Updated dependencies [[`3d1877c`](https://github.com/rrweb-io/rrweb/commit/3d1877cff83d9a018630674fb6e730050ceef812), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`02f50d2`](https://github.com/rrweb-io/rrweb/commit/02f50d260cfe72209c94de1679336737f238e216)]:
+  - rrweb@2.0.0-alpha.13
+  - rrweb-player@2.0.0-alpha.13
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- [#1333](https://github.com/rrweb-io/rrweb/pull/1333) [`40f484d`](https://github.com/rrweb-io/rrweb/commit/40f484d088390b480f088d1b1c1c152641cd5878) Thanks [@billyvg](https://github.com/billyvg)! - Update `vite.config.ts` to account for all potential entry types.
+
+- [#1360](https://github.com/rrweb-io/rrweb/pull/1360) [`0f004af`](https://github.com/rrweb-io/rrweb/commit/0f004af18dd8ba204fd80a68328fc48bf229e7f0) Thanks [@huangkairan](https://github.com/huangkairan)! - 🎈 perf(web-extension): conditional check in Player component
+
+- [#1307](https://github.com/rrweb-io/rrweb/pull/1307) [`8444cb2`](https://github.com/rrweb-io/rrweb/commit/8444cb2dad6ceb4bef3e32a6adba05ab65b56e52) Thanks [@huangkairan](https://github.com/huangkairan)! - 🐞 fix(web-extension): typo
+
+- [#1330](https://github.com/rrweb-io/rrweb/pull/1330) [`9e65dda`](https://github.com/rrweb-io/rrweb/commit/9e65dda258c9b8169a4a6486b5c018f42f6c512a) Thanks [@huangkairan](https://github.com/huangkairan)! - 🐞 fix(web-extension): beforeunload logic
+
+- Updated dependencies [[`af0962c`](https://github.com/rrweb-io/rrweb/commit/af0962cc6c80b693bbc622520032d17342685cf6), [`57a940a`](https://github.com/rrweb-io/rrweb/commit/57a940afac0bdd14cd82937915d53110b5311673), [`8aea5b0`](https://github.com/rrweb-io/rrweb/commit/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81), [`9c6edfe`](https://github.com/rrweb-io/rrweb/commit/9c6edfe2261680b4e92284be69f9d183b1eca8f4), [`1e0b273`](https://github.com/rrweb-io/rrweb/commit/1e0b27382210db0168d2a79d82c13698082b0983), [`1fe39ab`](https://github.com/rrweb-io/rrweb/commit/1fe39ab0db7f5d2b04f4a4f39fb5c0cfee33a1f8), [`05478c3`](https://github.com/rrweb-io/rrweb/commit/05478c36dde03a118099783d908bb3e465e9859c), [`58c9104`](https://github.com/rrweb-io/rrweb/commit/58c9104eddc8b7994a067a97daae5684e42f892f), [`980a38c`](https://github.com/rrweb-io/rrweb/commit/980a38c816d763833fc3491f56d03c959a41122d), [`a2be77b`](https://github.com/rrweb-io/rrweb/commit/a2be77b82826c4be0e7f3c7c9f7ee50476d5f6f8), [`a7c33f2`](https://github.com/rrweb-io/rrweb/commit/a7c33f2093c4d92faf7ae25e8bb0e088d122c13b), [`314a8dd`](https://github.com/rrweb-io/rrweb/commit/314a8dde5a13095873b89d07bac7c949918bf817), [`7c0dc9d`](https://github.com/rrweb-io/rrweb/commit/7c0dc9dfe1564c9d6624557c5b394e7844955882), [`07ac5c9`](https://github.com/rrweb-io/rrweb/commit/07ac5c9e1371824ec3ffb705f9250bbe10f4b73e)]:
+  - rrweb@2.0.0-alpha.12
+  - rrweb-player@2.0.0-alpha.12
+
 ## 2.0.0-alpha.11
 
 ### Patch Changes
diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json
index eb87e818ba..d06f8a8bb0 100644
--- a/packages/web-extension/package.json
+++ b/packages/web-extension/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@rrweb/web-extension",
   "private": true,
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "description": "The web extension of rrweb which helps to run rrweb on any website out of box",
   "author": "rrweb-io",
   "license": "MIT",
@@ -16,7 +16,7 @@
     "prepublish": "npm run pack:chrome && npm run pack:firefox"
   },
   "devDependencies": {
-    "@rrweb/types": "^2.0.0-alpha.11",
+    "@rrweb/types": "^2.0.0-alpha.13",
     "@types/react-dom": "^18.0.6",
     "@types/webextension-polyfill": "^0.9.1",
     "@vitejs/plugin-react": "^2.1.0",
@@ -40,7 +40,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.4.1",
-    "rrweb": "^2.0.0-alpha.11",
-    "rrweb-player": "^2.0.0-alpha.11"
+    "rrweb": "^2.0.0-alpha.13",
+    "rrweb-player": "^2.0.0-alpha.13"
   }
 }