添加首次加载事件

src/controls/index.js

@@ -15,13 +15,9 @@ export default class Controls {
   constructor(art) {
     this.art = art;
     this.$map = {};
-    this.isVideoCanplay = false;
-    this.art.on('video:canplay', () => {
-      if (!this.isVideoCanplay) {
-        this.isVideoCanplay = true;
-        this.init();
-        this.mount();
-      }
+    this.art.on('video:firstload', () => {
+      this.init();
+      this.mount();
     });
   }
 

src/controls/progress.js

@@ -41,15 +41,13 @@ export default class Progress {
     this.$indicator = this.option.$control.querySelector('.art-progress-indicator');
     this.$tip = this.option.$control.querySelector('.art-progress-tip');
 
-    this.art.on('video:canplay', () => {
-      this.set('loaded', this.getLoaded());
-      highlight.filter(item => !item.disable).forEach(item => {
-        const left = Number(item.time) / $video.duration;
-        append(this.$highlight, `
-          <span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
-        `
-        );
-      });
+    this.set('loaded', this.getLoaded());
+    highlight.forEach(item => {
+      const left = Number(item.time) / $video.duration;
+      append(this.$highlight, `
+        <span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
+      `
+      );
     });
 
     this.art.on('video:progress', () => {

src/player.js

@@ -6,6 +6,7 @@ export default class Player {
     this.art = art;
     this.init();
     this.eventBind();
+    this.firstLoad = false;
   }
 
   init() {
@@ -46,6 +47,11 @@ export default class Player {
     });
 
     this.art.on('video:canplay', () => {
+      if (!this.firstLoad) {
+        this.firstLoad = true;
+        this.art.emit('video:firstload');
+      }
+
       this.art.controls.show();
       this.art.mask.show();
       this.art.loading.hide();