视频播放做了加载动画

src/renderer/components/player.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="video-player" v-if="reseted">
-    <video
-            class="video-js vjs-fluid"
-            ref="video"
-            width="100%"
-            height="100%"
-            style="object-fit: fill!important;"
-    ></video>
+  <div :style="{width:'100%',position:'relative',height:'100%'}">
+    <div class="video-player" v-if="reseted">
+      <video
+              class="video-js vjs-fluid"
+              ref="video"
+              width="100%"
+              height="100%"
+              style="object-fit: fill!important;"
+      />
+    </div>
+    <div v-if="loading" :style="{width:'100%',height:'100%',position:'absolute',left:'0px',top:'0px'}">
+      <img :style="{width:'100%',height:'100%'}"
+           src="https://img.zcool.cn/community/0113b1576a43e90000018c1b87042d.gif"
+      />
+    </div>
   </div>
 </template>
 
@@ -103,7 +110,8 @@
     data() {
       return {
         player: null,
-        reseted: true
+        reseted: true,
+        loading:true
       }
     },
     mounted() {
@@ -160,10 +168,21 @@
 
         // player
         const self = this
-        this.player = videojs(this.$refs.video, videoOptions, function() {
+        this.player = videojs(this.$refs.video, videoOptions, function(){
+          self.loading = true
+          self.player.play()
+          self.player.on("playing", function(){
+            // 监听播放，播放器开始播放将加载动画取消
+            self.loading = false
+          })
+
+          self.player.on("error", function(){
+            // 播放报错，将加载动画取消
+            self.loading = false
+          })
 
           // events
-          const events = DEFAULT_EVENTS.concat(self.events).concat(self.globalEvents)
+          /*const events = DEFAULT_EVENTS.concat(self.events).concat(self.globalEvents)
 
           // watch events
           const onEdEvents = {}
@@ -184,7 +203,7 @@
           })
 
           // player readied
-          self.$emit('ready', this)
+          self.$emit('ready', this)*/
         })
       },
       dispose(callback) {