fix video

 <template>
-  <div class="video-player">
+  <div class="video-player" :style="videoStyle">
     <video
       ref="videoPlayer"
       class="video-js vjs-matrix vjs-yoho"
@@ -20,13 +20,17 @@
 </template>
 
 <script>
+import {get} from 'lodash';
 import videojs from 'video.js';
+import {getArticleImageSize, processImage} from 'utils/image-handler';
 
 export default {
   name: 'VideoPlayer',
   props: {
     source: String,
     cover: String,
+    width: [Number, String],
+    height: [Number, String],
     options: {
       type: Object,
       default() {
@@ -40,20 +44,38 @@ export default {
   },
   data() {
     return {
-      player: null
+      player: null,
+      loaded: false
     };
   },
   computed: {
     coverImg() {
       if (this.cover) {
-        return this.cover.split('?')[0];
+        if (this.width && this.height) {
+          let imgSize = getArticleImageSize({
+            width: this.width,
+            height: this.height,
+            minScale: 0,
+            maxWidth: 500
+          });
+
+          return processImage(this.cover, 2, imgSize.width, imgSize.height, get(this.yoho, 'window.supportWebp'));
+        } else {
+          return this.cover.split('?')[0];
+        }
+
       } else {
         return '';
       }
     },
+    videoStyle() {
+      return {visibility: this.loaded ? 'visible' : 'hidden'};
+    }
   },
   mounted() {
-    this.player = videojs(this.$refs.videoPlayer, this.options);
+    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
+      this.loaded = true;
+    });
 
     this.voiceBtn = this.player.addChild('button');
     this.voiceBtn.addClass('vjs-yoho-voice');
@@ -131,6 +153,24 @@ export default {
         }
       }
 
+      .vjs-loading-spinner {
+        width: 120px;
+        height: 120px;
+        margin-top: -60px;
+        margin-left: -60px;
+        border: none;
+        background: url("~statics/image/components/video-loading-icon.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+
+        &:before,
+        &:after,
+        > * {
+          display: none;
+        }
+      }
+
       .vjs-control-bar {
         height: 80px;
         opacity: 1 !important;

@@ -5,7 +5,7 @@
         <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
         <div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage">
           <div v-if="cornerMark" class="article-corner-mark" :class="cornerMark"></div>
-          <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat>
+          <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height" :lazy="coverImage.lazy"></ImageFormat>
         </div>
         <div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div>
         <div class="attribution">
@@ -61,13 +61,18 @@ export default {
       let img = get(this.data, 'blockList', []).filter(block => block.templateKey === 'image')[0] || {
         contentData: this.data.coverImage,
         width: this.data.imageWidth,
-        height: this.data.imageHeight
+        height: this.data.imageHeight,
+        lazy: true
       };
 
       if (img.contentData && img.contentData.indexOf('?') < 0) {
         img.contentData += '?imageView2/{mode}/w/{width}/h/{height}';
       }
 
+      if (img.contentData && img.contentData.indexOf('.gif?') > 0) {
+        img.lazy = false;
+      }
+
       img = Object.assign({...img}, getArticleImageSize({
         width: img.width,
         height: img.height,

@@ -7,7 +7,7 @@
       {{data.emptyTip || '文章不存在或文章被删除'}}
     </div>
     <div v-else class="article-context">
-      <VideoPlayer v-if="+data.sort === 4" :source="data.videoUrl" :cover="data.coverUrl"></VideoPlayer>
+      <VideoPlayer v-if="+data.sort === 4" class="note-video" :source="data.videoUrl" :cover="data.coverUrl" :width="data.width" :height="data.height"></VideoPlayer>
       <ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
       <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
 
@@ -184,6 +184,10 @@ export default {
   }
 }
 
+.note-video {
+  height: 750px;
+}
+
 .rec-article-title {
   padding: 14px 0 4px;
   border-top: 1px solid #f0f0f0;