impl media interactions recording

close #159
close #72
listen to HTMLMediaElement's play/pause events, and replay them
by programmatically play and pause the target element.

src/replay/index.ts

@@ -20,6 +20,7 @@ import {
   ReplayerEvents,
   Handler,
   Emitter,
+  MediaInteractions,
 } from '../types';
 import { mirror, polyfill } from '../utils';
 import getInjectStyleRules from './styles/inject-style';
@@ -587,6 +588,26 @@ export class Replayer {
         }
         break;
       }
+      case IncrementalSource.MediaInteraction: {
+        const target = mirror.getNode(d.id);
+        if (!target) {
+          return this.debugNodeNotFound(d, d.id);
+        }
+        const mediaEl = (target as Node) as HTMLMediaElement;
+        if (d.type === MediaInteractions.Pause) {
+          mediaEl.pause();
+        }
+        if (d.type === MediaInteractions.Play) {
+          if (mediaEl.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            mediaEl.play();
+          } else {
+            mediaEl.addEventListener('canplay', () => {
+              mediaEl.play();
+            });
+          }
+        }
+        break;
+      }
       default:
     }
   }