增加附加视频预览功能，并对不支持预览的缩略图做不支持处理

package.json

@@ -21,12 +21,13 @@
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.0",
     "vue-codemirror-lite": "^1.0.4",
+    "vue-count-to": "^1.0.13",
     "vue-cropper": "0.4.9",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.0.6",
+    "vue-video-player": "^5.0.2",
     "vuejs-logger": "^1.5.3",
-    "vuex": "^3.1.1",
-    "vue-count-to": "^1.0.13"
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.4.4",

src/views/attachment/AttachmentList.vue

@@ -99,7 +99,8 @@
               @click="handleShowDetailDrawer(item)"
             >
               <div class="attach-thumb">
-                <img :src="item.thumbPath">
+                <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
+                <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)">
               </div>
               <a-card-meta>
                 <ellipsis
@@ -242,6 +243,23 @@ export default {
     onUploadClose() {
       this.loadAttachments()
       this.loadMediaTypes()
+    },
+    handleJudgeMediaType(attachment) {
+      var mediaType = attachment.mediaType
+      // 判断文件类型
+      if(mediaType) {
+        var prefix = mediaType.split('/')[0]
+        
+        if(prefix === 'image') {
+          // 是图片
+           return true
+        } else {
+           // 非图片
+          return false
+        }
+      }
+      //没有获取到文件返回false
+      return false
     }
   }
 }
@@ -262,13 +280,20 @@ export default {
   position: relative;
   padding-bottom: 56%;
   overflow: hidden;
-  img {
+  img, span{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
   }
+  span {
+    display: flex;
+    font-size: 12px;
+    align-items: center;
+    justify-content: center;
+    color: #9b9ea0;
+  }
 }
 
 .ant-card-meta {

src/views/attachment/components/AttachmentDetailDrawer.vue

@@ -19,7 +19,12 @@
         >
           <div class="attach-detail-img">
             <div v-show="nonsupportPreviewVisible">此文件不支持预览</div>
-            <img :src="attachment.path" v-if="photoPreviewVisible">
+            <img :src="attachment.path" v-show="photoPreviewVisible">
+            <video-player  class="video-player-box" v-show="videoPreviewVisible"
+                 ref="videoPlayer"
+                 :options="playerOptions"
+                 :playsinline="true">
+              </video-player>
           </div>
         </a-skeleton>
       </a-col>
@@ -149,18 +154,41 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import attachmentApi from '@/api/attachment'
 import photoApi from '@/api/photo'
+import 'video.js/dist/video-js.css'
+import { videoPlayer } from 'vue-video-player'
 
 export default {
   name: 'AttachmentDetailDrawer',
   mixins: [mixin, mixinDevice],
+  components: {
+    videoPlayer
+  },
   data() {
     return {
       detailLoading: true,
       editable: false,
       photo: {},
       photoPreviewVisible: false,
-      vedioPreviewVisible: false,
-      nonsupportPreviewVisible: false
+      videoPreviewVisible: false,
+      nonsupportPreviewVisible: false,
+      playerOptions: {
+        // videojs options
+        muted: true,
+        language: 'zh-CN',
+        aspectRatio: '16:9',
+        fluid: true,
+        controls: true,
+        loop: false,
+        muted: false,
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [{
+          type: "video/mp4",
+          src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
+        }],
+        poster: "/static/images/author.jpg",
+        width: document.documentElement.clientWidth,
+        notSupportedMessage: '此视频暂无法播放，请稍后再试'
+      }
     }
   },
   model: {
@@ -186,6 +214,11 @@ export default {
   created() {
     this.loadSkeleton()
   },
+  computed: {
+    player() {
+      return this.$refs.videoPlayer.player
+    }
+  },
   watch: {
     visiable: function(newValue, oldValue) {
       this.$log.debug('old value', oldValue)
@@ -197,8 +230,7 @@ export default {
     attachment: function(newValue, oldValue) {
       if (newValue) {
         var attachment = newValue
-        var mediaType = attachment.mediaType
-        this.handleJudgeMediaType(mediaType)
+        this.handleJudgeMediaType(attachment)
       }
     }
   },
@@ -262,20 +294,29 @@ export default {
     onClose() {
       this.$emit('close', false)
     },
-    handleJudgeMediaType(mediaType) {
+    handleJudgeMediaType(attachment) {
+      var mediaType = attachment.mediaType
       // 判断文件类型
       if(mediaType) {
         var prefix = mediaType.split('/')[0]
         
         if(prefix === 'video' || prefix==='flv') {
-          this.vedioPreviewVisible = true
+          this.videoPreviewVisible = true
+          this.photoPreviewVisible = false
           this.nonsupportPreviewVisible = false
+          // 设置视频地址
+          this.$set(this.playerOptions.sources, 0, {
+            type: mediaType,
+            src: attachment.path
+          })
+          console.log(this.playerOptions.sources)
         } else if(prefix === 'image') {
            this.photoPreviewVisible = true
+           this.videoPreviewVisible = false
            this.nonsupportPreviewVisible = false
         } else {
           this.nonsupportPreviewVisible = true
-          this.vedioPreviewVisible = false
+          this.videoPreviewVisible = false
           this.photoPreviewVisible = false
         }
       }
@@ -288,4 +329,7 @@ export default {
 .attach-detail-img img {
   width: 100%;
 }
+.video-player-box {
+  width: 100%;
+}
 </style>