vue2-client 1.6.18 → 1.6.19

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.6.18 -2023-02-13 @屈胜华**
+**1.6.19 -2023-03-27 @屈胜华**
 - FilePreview可以显示视频
 
 **1.6.15 - 1.6.17 -2023-02-14 @江超**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.6.18",
+  "version": "1.6.19",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -38,7 +38,9 @@
     "vue-i18n": "^8.27.2",
     "vue-router": "^3.5.4",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vue-video-player": "5.0.2",
+    "videojs-contrib-hls": "5.14.1"
   },
   "devDependencies": {
     "script-loader": "^0.7.2",

package/src/components/FilePreview/FilePreview.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!pathError">
     <!-- 文件 -->
-    <div v-if="!showImagePreview" class="preview-doc-container">
+    <div v-if="showImagePreview == 1" class="preview-doc-container">
       <a-spin size="large" :spinning="previewDocLoading" />
       <iframe
         v-show="!previewDocLoading"
@@ -12,18 +12,33 @@
         @load="previewDocLoading = false" />
     </div>
     <!-- 图片 -->
-    <div v-else style="text-align: center">
+    <div v-if="showImagePreview == 2" style="text-align: center">
       <img :src="previewImageSrc" alt="image" class="preview-image">
     </div>
+    <!-- 视频 -->
+    <div v-if="showImagePreview == 3" style="text-align: center">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions">
+      </video-player>
+    </div>
   </div>
   <a-empty v-else description="文件路径为空" />
 </template>
 
 <script>
 import { Base64 } from 'js-base64'
+import 'video.js/dist/video-js.css'
+import 'videojs-contrib-hls'
+import { videoPlayer } from 'vue-video-player'
 
 export default {
   name: 'FilePreview',
+  components: {
+    videoPlayer
+  },
   props: {
     path: {
       type: String,
@@ -46,10 +61,34 @@ export default {
       previewDocLoading: true,
       previewDocUrl: '',
       // 图片预览
-      showImagePreview: false,
+      showImagePreview: 1,
       previewImageSrc: '',
+      // 视频
+      previewVideoSrc: '',
       // 路径是否为空
-      pathError: false
+      pathError: false,
+      playerOptions: {
+        playbackRates: [0.5, 1.0, 1.5, 2.0],
+        autoplay: false,
+        muted: false,
+        loop: false,
+        preload: 'auto',
+        language: 'zh-CN',
+        aspectRatio: '16:9',
+        fluid: true,
+        sources: [{
+          type: '',
+          src: ''
+        }],
+        poster: '',
+        notSupportedMessage: '此视频暂无法播放，请稍后再试',
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true
+        }
+      }
     }
   },
   watch: {
@@ -70,14 +109,18 @@ export default {
       this.pathError = false
       if (this.isImage()) {
         this.previewImageSrc = this.path
-        this.showImagePreview = true
+        this.showImagePreview = 2
+      } else if (this.isVideo()) {
+        this.playerOptions['sources'][0]['type'] = 'video/' + this.path.substring(this.path.lastIndexOf('.') + 1)
+        this.playerOptions['sources'][0]['src'] = this.path
+        this.showImagePreview = 3
       } else {
         const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + this.path))
         if (this.previewDocUrl !== previewDocUrl) {
           this.previewDocLoading = true
           this.previewDocUrl = previewDocUrl
         }
-        this.showImagePreview = false
+        this.showImagePreview = 1
       }
     },
     // 判断是否为图片
@@ -91,12 +134,24 @@ export default {
         return false
       }
       return true
+    },
+    // 判断是否为视频
+    isVideo () {
+      const index = this.path.lastIndexOf('.')
+      if (index === -1) {
+        return false
+      }
+      const suffix = this.path.substr(index + 1)
+      if (!suffix || !VIDEO_SUFFIX_ARRAY.includes(suffix)) {
+        return false
+      }
+      return true
     }
   }
 }
 // 图片后缀
-const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif',
-  'avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob']
+const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
+const VIDEO_SUFFIX_ARRAY = ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob']
 </script>
 
 <style>