refactor: 视频播放器改为artplayer

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "ant-design-vue": "^1.6.5",
+    "artplayer": "^4.5.4",
     "clipboard": "^2.0.6",
     "cropperjs": "^1.5.6",
     "e-vue-contextmenu": "^0.1.3",
@@ -52,7 +53,6 @@
     "vue-aplayer": "^1.6.1",
     "vue-runtime-helpers": "^1.1.2",
     "vue-simple-uploader": "^0.7.4",
-    "vue-video-player": "^5.0.2",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.1.0",
     "websocket": "^1.0.34"

src/components/preview/Artplayer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from 'artplayer';
+
+export default {
+  name: 'Artplayer',
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit('get-instance', this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>

src/components/preview/VideoPreview.vue

@@ -2,25 +2,11 @@
 <div class="preview" v-if="show">
 <van-overlay :show="show">
   <div class="wrapper">
-    <div class="block"
+    <div class="block">
-         @mousemove="onmousemove"
+      <div class="close-bar" @click="close">
-         @mouseout="onmouseout"
-         @mouseenter="onmouseenter"
-         @mouseleave="onmouseleave"
-         @touchstart="onmouseenter"
-         @touchend="onmousemove"
-    >
-      <div v-show="closeBarShow" class="close-bar" @click="close">
         <svg-icon class="audio-player-close" icon-class="close"/>
       </div>
-      <video-player class="video-player vjs-custom-skin"
+      <Artplayer @get-instance="getInstance" :option="option" :style="style"/>
-        ref="videoPlayer"
-        :playsinline="true"
-        :options="playerOptions"
-        @playing="onPlayerPlaying"
-        @ended="onPlayerEnded"
-        @pause="onPlayerPause">
-      </video-player>
     </div>
   </div>
 </van-overlay>
@@ -28,15 +14,13 @@
 </template>
 
 <script>
-import 'vue-video-player/src/custom-theme.css'
-import 'video.js/dist/video-js.css'
-import { videoPlayer } from 'vue-video-player'
 import fileConfig from '@/utils/file-config'
+import Artplayer from "@/components/preview/Artplayer.vue";
 
 export default {
     name: 'VideoPreview',
     components: {
-      videoPlayer
+      Artplayer
     },
     props: {
       file: {
@@ -58,39 +42,25 @@ export default {
     },
     data() {
       return {
-        closeBarShow: false,
         pc: this.$pc,
-        playerOptions: {
+        option: {
-                    //播放速度
+          url: '',
-                    playbackRates: [0.5, 1.0, 1.5, 2.0],
+          fullscreen: true,
-                    //如果true,浏览器准备好时开始回放。
+          fullscreenWeb: true,
-                    autoplay: true,
+          //pip: true, // 是否在底部控制栏里显示 画中画 的开关按钮
-                    // 默认情况下将会消除任何音频。
+          flip: true, // 是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
-                    muted: false,
+          playbackRate: true, // 是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
-                    // 导致视频一结束就重新开始。
+          aspectRatio: true, // 是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
-                    loop: false,
+          screenshot: true, // 是否在底部控制栏里显示 视频截图 功能
-                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+          setting: true, // 是否在底部控制栏里显示 设置面板 的开关按钮
-                    preload: 'auto',
+        },
-                    language: 'zh-CN',
+        style: {
-                     // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+          width: '100vw',
-                    aspectRatio: '16:9',
+          height: '60vh',
-                     // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+          maxWidth: '900px',
-                    fluid: true,
+          maxHeight: '600px',
-                    sources: [],
+        },
-                    //你的封面地址
-                    poster: '',
-                     //允许覆盖Video.js无法播放媒体源时显示的默认信息。
-                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
-                    controlBar: {
-                        timeDivider: true,
-                        durationDisplay: true,
-                        remainingTimeDisplay: true,
-                        //全屏按钮
-                        fullscreenToggle: true
-                    }
-                },
         show: this.status,
-        url: '',
         timeout: null,
         playing: false,
       }
@@ -98,16 +68,11 @@ export default {
     watch: {
       status: function(visible){
         if(visible){
-          let url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
+          this.option.url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
           if(this.shareId){
-            url = fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken);
+            this.option.url = fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken)
           }
-          this.playerOptions.sources = [{
+          this.option.id = this.file.id
-                        //类型
-                        type: this.file.contentType,
-                        //url地址
-                        src: url,
-                    }]
           this.show = true
         }
       }
@@ -117,62 +82,8 @@ export default {
         this.show = false
         this.$emit('update:status', false)
       },
-      onPlayerPlaying(){
+      getInstance(art) {
-        this.playing = true
-        this.clearTimeout()
-        this.timeout = setTimeout(this.timeoutFun, 2500)
       },
-      onPlayerPause(){
-        this.closeBarShow = true
-        this.playing = false
-      },
-      onPlayerEnded(){
-        this.closeBarShow = true
-        this.playing = false
-      },
-      onmousemove() {
-        if(!this.closeBarShow){
-            this.closeBarShow = true
-          }
-          this.clearTimeout()
-          this.timeout = setTimeout(this.timeoutFun, 2500)
-      },
-      onmouseout() {
-          // console.log('onmouseout')
-          // this.timeout = null
-      },
-      onmouseleave() {
-        this.closeBarShow = false
-        this.clearTimeout()
-      },
-      clearTimeout(){
-        if(this.timeout != null){
-          clearTimeout(this.timeout)
-          this.timeout = null
-        }
-      },
-      timeoutFun(){
-        if(this.playing){
-          if(!this.$pc){
-            const closeBar = document.querySelector('.block .close-bar')
-            if(closeBar){
-              closeBar.style.display = "none"
-            }
-          }
-          this.closeBarShow = false
-        }
-        this.clearTimeout()
-      },
-      onmouseenter() {
-        this.closeBarShow = true
-      },
-      ontouchstart() {
-        this.closeBarShow = true
-      },
-      ontouchsend() {
-        this.closeBarShow = false
-        this.clearTimeout()
-      }
     }
 }
 </script>
@@ -198,9 +109,11 @@ export default {
 }
 
 .block {
+
+
   .close-bar {
     z-index: 2006;
-    position: relative;
+    position: absolute;
     top: -36px;
     right: -36px;
     float: right;
@@ -212,7 +125,7 @@ export default {
     border-color: transparent transparent transparent #d4d4d475;
     line-height: 36px;
     opacity: 1;
-    transform: rotate(-45deg);
+    transform: rotate(315deg);
   }
 
   .close-bar:hover {
@@ -221,13 +134,14 @@ export default {
   }
 
   .audio-player-close {
-    transform: rotate(-45deg);
+    transform: rotate(315deg);
     z-index: 2009;
     position: absolute;
     font-size: 18px;
     top: -8px;
     right: 13px;
   }
+
 }
 
 .wrapper {
@@ -237,7 +151,4 @@ export default {
   height: 100%;
 }
 
-.block {
-  width: 900px;
-}
 </style>