update

src/hotkey.js

@@ -33,12 +33,12 @@ export default class Hotkey {
           switch (event.keyCode) {
             case 39:
               event.preventDefault();
-              player.seek(player.currentTime + 10);
+              player.seek(player.currentTime() + 10);
               notice.show(i18n.get('Fast forward 10 seconds'), true);
               break;
             case 37:
               event.preventDefault();
-              player.seek(player.currentTime - 10);
+              player.seek(player.currentTime() - 10);
               notice.show(i18n.get('Rewind 10 seconds'), true);
               break;
             case 38:

src/layers.js

@@ -8,10 +8,10 @@ export default class Layers {
   }
 
   init() {
-    const { refs, events: { proxy } } = this.art;
+    const { refs, player, events: { proxy } } = this.art;
     proxy(refs.$layers, 'click', event => {
       if (event.path[0] === refs.$layers) {
-        refs.$video.pause();
+        player.pause();
       }
     });
   }

src/loading.js

@@ -3,7 +3,6 @@ import Icons from './icons';
 export default class Loading {
   constructor(art) {
     this.art = art;
-    this.state = false;
     this.init();
   }
 
@@ -17,12 +16,10 @@ export default class Loading {
   }
 
   hide() {
-    this.state = false;
     this.art.refs.$loading.style.display = 'none';
   }
 
   show() {
-    this.state = true;
     this.art.refs.$loading.style.display = 'flex';
   }
 }

src/mask.js

@@ -8,6 +8,7 @@ export default class Mask {
 
   init() {
     const {
+      player,
       option,
       refs,
       events: { proxy }
@@ -17,7 +18,7 @@ export default class Mask {
     refs.$mask.appendChild(Icons.play);
 
     proxy(refs.$mask, 'click', () => {
-      refs.$video.play();
+      player.play();
       this.hide();
     });
   }

src/player.js

@@ -6,6 +6,7 @@ export default class Player {
     this.art = art;
     this.init();
     this.eventBind();
+    this.playing = false;
   }
 
   init() {
@@ -39,7 +40,7 @@ export default class Player {
       this.art.controls.show();
       this.art.mask.show();
       if (this.art.option.autoplay) {
-        const promise = $video.play();
+        const promise = this.play();
         if (promise !== undefined) {
           promise.then().catch(err => {
             console.warn(err);
@@ -49,31 +50,38 @@ export default class Player {
     });
 
     this.art.on('video:playing', () => {
+      this.playing = true;
       this.art.controls.hide();
       this.art.mask.hide();
     });
 
     this.art.on('video:pause', () => {
+      this.playing = false;
       this.art.controls.show();
       this.art.mask.show();
     });
 
     this.art.on('video:ended', () => {
+      this.playing = false;
       this.art.controls.show();
       this.art.mask.show();
     });
   }
 
   play() {
-    //
+    return this.art.refs.$video.play();
   }
 
   pause() {
-    //
+    return this.art.refs.$video.pause();
   }
 
   toggle() {
-    //
+    if (this.playing) {
+      this.pause();
+    } else {
+      this.play();
+    }
   }
 
   seek() {