Fix video preview error

package.json

@@ -24,10 +24,10 @@
     "vue-clipboard2": "^0.3.0",
     "vue-codemirror-lite": "^1.0.4",
     "vue-count-to": "^1.0.13",
+    "vue-dplayer": "0.0.10",
     "vue-filepond": "^5.1.3",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.1.3",
-    "vue-video-player": "^5.0.2",
     "vuejs-logger": "^1.5.3",
     "vuex": "^3.1.1"
   },
@@ -127,4 +127,4 @@
     "last 2 versions",
     "not ie <= 10"
   ]
-}
+}

src/views/attachment/components/AttachmentDetailDrawer.vue

@@ -26,15 +26,14 @@
                 style="width: 100%;"
               >
             </a>
-            <video-player
+            <d-player
-              class="video-player-box"
+              ref="player"
+              :options="videoOptions"
               v-show="videoPreviewVisible"
-              ref="videoPlayer"
+              class="video-player-box"
-              :options="playerOptions"
-              :playsinline="true"
               style="width: 100%;"
             >
-            </video-player>
+            </d-player>
           </div>
         </a-skeleton>
       </a-col>
@@ -162,16 +161,16 @@
 
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
-import { videoPlayer } from 'vue-video-player'
-import 'video.js/dist/video-js.css'
 import attachmentApi from '@/api/attachment'
 import photoApi from '@/api/photo'
+import VueDPlayer from 'vue-dplayer'
+import 'vue-dplayer/dist/vue-dplayer.css'
 
 export default {
   name: 'AttachmentDetailDrawer',
   mixins: [mixin, mixinDevice],
   components: {
-    videoPlayer
+    'd-player': VueDPlayer
   },
   data() {
     return {
@@ -181,24 +180,13 @@ export default {
       photoPreviewVisible: false,
       videoPreviewVisible: false,
       nonsupportPreviewVisible: false,
-      playerOptions: {
+      player: {},
-        // videojs options
+      videoOptions: {
-        muted: true,
+        lang: 'zh-cn',
-        language: 'zh-CN',
+        video: {
-        aspectRatio: '16:9',
+          url: '',
-        fluid: true,
+          type: 'auto'
-        controls: true,
+        }
-        loop: 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: '此视频暂无法播放，请稍后再试'
       }
     }
   },
@@ -225,10 +213,8 @@ export default {
   created() {
     this.loadSkeleton()
   },
-  computed: {
+  mounted() {
-    player() {
+    this.player = this.$refs.player
-      return this.$refs.videoPlayer.player
-    }
   },
   watch: {
     visible: function(newValue, oldValue) {
@@ -320,39 +306,29 @@ export default {
         var prefix = mediaType.split('/')[0]
 
         if (prefix === 'video' || prefix === 'flv') {
-          this.videoPreviewVisible = true
+          // 控制各个组件的显示
-          this.photoPreviewVisible = false
+          this.handlePreviewVisible(false, true, false)
-          this.nonsupportPreviewVisible = false
+
+          // 去除视频地址后面的参数
+          var lastIndex = attachment.path.lastIndexOf('?')
+          var path = attachment.path.substring(0, lastIndex)
+
           // 设置视频地址
-          this.$set(this.playerOptions.sources, 0, {
+          this.$set(this.videoOptions.video, 'url', path)
-            type: mediaType,
+          this.$log.debug('video url', path)
-            src: attachment.path
-          })
-          console.log(this.playerOptions.sources)
         } else if (prefix === 'image') {
-          this.photoPreviewVisible = true
+          this.handlePreviewVisible(true, false, false)
-          this.videoPreviewVisible = false
-          this.nonsupportPreviewVisible = false
         } else {
-          this.nonsupportPreviewVisible = true
+          this.handlePreviewVisible(false, false, true)
-          this.videoPreviewVisible = false
-          this.photoPreviewVisible = false
         }
       }
+    },
+    handlePreviewVisible(photo, video, nonsupport) {
+      // 为了更好的使vue监听到组件变化及时刷新,方式修改组件后需要刷新才能显示一下部分
+      this.$set(this, 'photoPreviewVisible', photo)
+      this.$set(this, 'videoPreviewVisible', video)
+      this.$set(this, 'nonsupportPreviewVisible', nonsupport)
     }
-    // handleDownLoadPhoto(attachment) {
-    //   var path = attachment.path
-
-    //   var index = path.lastIndexOf('/')
-    //   var filename = path.substr(index+1, path.length)
-    //   //  chrome/firefox
-    //   var aTag = document.createElement('a')
-    //   aTag.download = filename
-    //   aTag.href = path//URL.createObjectURL(blob)
-    //   aTag.target = '_blank'
-    //   aTag.click()
-    //   URL.revokeObjectURL(aTag.href)
-    // }
   }
 }
 </script>