添加视屏预览

package.json

@@ -45,6 +45,7 @@
     "vue-router": "3.0.6",
     "vue-simple-uploader": "^0.7.4",
     "vue-touch": "^2.0.0-beta.4",
+    "vue-video-player": "^5.0.2",
     "vue-wechat-title": "^2.0.5",
     "vuedraggable": "^2.23.2",
     "vuex": "3.1.0",

src/components/ShowFile/ShowFile.vue

@@ -329,7 +329,8 @@
       @current-change="currentChange">
     </el-pagination>
     <sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
-    <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imageViewerVisible"></image-viewer>
+    <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
+    <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
   </div>
 </template>
 
@@ -352,10 +353,11 @@
   import Clipboard from 'clipboard';
   import SimTextPreview from "@/components/preview/SimTextPreview";
   import ImageViewer from "@/components/preview/ImageViewer";
+  import VideoPreview from "@/components/preview/VideoPreview";
 
   export default {
     name: 'ShowFile',
-    components: {ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile},
+    components: {VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile},
     props: {
       emptyStatus: {
         'type': String,
@@ -538,7 +540,9 @@
         textPreviewVisible : false,
         textPreviewRow: {},
         imagePreviewRow: {},
-        imageViewerVisible : false,
+        imagePreviewVisible : false,
+        videoPreviewRow: {},
+        videoPreviewVisible: false,
       }
     },
     computed: {
@@ -1897,7 +1901,7 @@
         } else {
           if(row.contentType.indexOf('image') > -1){
             // 图片
-            this.imageViewerVisible = true
+            this.imagePreviewVisible = true
             this.imagePreviewRow = row
             return
           }
@@ -1907,6 +1911,12 @@
             this.textPreviewVisible = true
             return
           }
+          if(row.contentType.indexOf('video') > -1){
+            // 视屏
+            this.videoPreviewVisible = true
+            this.videoPreviewRow = row
+            return
+          }
           if(row.contentType.includes('text')){
             // let routeData = this.$router.resolve({path: '/public/articles/article',query: {mark: row.id}})
             // window.open(routeData.href, '_blank');

src/components/preview/ImageViewer.vue

@@ -127,6 +127,8 @@
   }
 </script>
 
-<style lang="scss" scoped>
+<style>
-  
+.viewer-backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+}
 </style>

src/components/preview/VideoPreview.vue

@@ -0,0 +1,130 @@
+<template>
+<div class="preview" v-if="show">
+<van-overlay :show="show">
+  <div class="wrapper">
+    <div class="block">
+      <video-player class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions">              
+      </video-player>
+    </div>
+    <div role="button" @click="close" class="viewer-button viewer-close" data-viewer-action="mix"></div>
+  </div>
+</van-overlay>
+</div>
+</template>
+
+<script>
+import 'vant/lib/overlay/style';
+import 'vue-video-player/src/custom-theme.css'
+import 'video.js/dist/video-js.css'
+import { videoPlayer } from 'vue-video-player'
+export default {
+    name: 'VideoPreview',
+    components: {
+      videoPlayer
+    },
+    props: {
+      file: {
+        type: Object,
+        default: function () {
+          return {}
+        }
+      },
+      status: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+    },
+    data() {
+      return {
+        playerOptions: {
+                    //播放速度
+                    playbackRates: [0.5, 1.0, 1.5, 2.0], 
+                    //如果true,浏览器准备好时开始回放。
+                    autoplay: true, 
+                    // 默认情况下将会消除任何音频。
+                    muted: false, 
+                    // 导致视频一结束就重新开始。
+                    loop: false, 
+                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                    preload: 'auto', 
+                    language: 'zh-CN',
+                     // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                    aspectRatio: '16:9',
+                     // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                    fluid: true,
+                    sources: [],
+                    //你的封面地址
+                    poster: '', 
+                     //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
+                    controlBar: {
+                        timeDivider: true,
+                        durationDisplay: true,
+                        remainingTimeDisplay: true,
+                        //全屏按钮
+                        fullscreenToggle: true  
+                    }
+                },
+        show: this.status,
+        url: '',
+      }  
+    },
+    watch: {
+      status: function(visible){
+        if(visible){
+          let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + this.file.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + this.file.id
+          this.playerOptions.sources = [{
+                        //类型
+                        type: this.file.contentType,
+                        //url地址
+                        src: url,
+                    }]
+          this.show = true
+        }
+      }
+    },
+    methods: {
+      close(){
+        this.show = false
+        this.$emit('update:status', false)
+      }
+    }
+}
+</script>
+
+<style>
+.preview {
+  position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1002;
+    width: 100%;
+    height: 100%;
+}
+
+.van-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1003;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.7);
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 900px;
+}
+</style>

src/main.js

@@ -26,6 +26,8 @@ import '@/permission' // permission control
 
 import VueTouch from"vue-touch";
 import Viewer from 'v-viewer'
+// import VideoPlayer from 'vue-video-player'
+// Vue.use(VideoPlayer)
 Vue.use(Viewer)
 Vue.use(VueTouch, {name:'v-touch'})