diff --git a/package.json b/package.json
index 5049bcec..a0bb66be 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.7"
+    "rrweb": "^0.7.8"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/public/index.html b/public/index.html
index 8dafb1ed..7e6ff699 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,13 +15,13 @@
     <script src="./events.js"></script>
     <script>
       // eslint-disable-next-line
-      new rrwebPlayer({
+      const component = new rrwebPlayer({
         target: document.body,
         data: {
           events,
-          autoPlay: false,
         },
       });
+      component.addEventListener('finish', () => console.log('finish'));
     </script>
   </body>
 </html>
diff --git a/src/Player.html b/src/Player.html
index 09d4958f..6ec461a4 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -60,6 +60,10 @@
           isFullscreen() ? exitFullscreen() : openFullscreen(this.refs.player);
         }
       },
+      addEventListener(event, handler) {
+        const { replayer } = this.get();
+        replayer.on(event, handler);
+      },
     },
     oncreate() {
       const { events } = this.get();