视频稿件编辑添加预览视频功能

src/components/VideoPreviewPlayer.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="dplayer" ref="dplayer" style="height: 480px;" />
+</template>
+
+<script>
+import { videoUrl } from '@/api/video'
+
+import flvjs from 'flv.js'
+import DPlayer from 'dplayer'
+
+export default {
+  name: 'VideoPreviewPlayer',
+  props: {
+    videoProp: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      flvjs,
+      DPlayer,
+      message: '',
+      dplayer: null
+    }
+  },
+  created() {
+    this.getVideoUrl(this.videoProp.videoId)
+  },
+  watch: {
+    // 监控 videoProp 对象的变化
+     videoProp(newVal) {
+       console.log('videoProp changed')
+       if (!newVal.play) {
+         this.dplayer.destroy()
+       } else {
+         this.getVideoUrl(newVal.videoId)
+       }
+    }
+  },
+  methods: {
+    getVideoUrl(videoId) {
+      videoUrl(videoId).then(res => {
+        if (res.code === 0) {
+          const urlType = res.data.type
+          if (urlType === 'mp4') {
+            const urls = res.data.urls
+            for (const url of urls) {
+              url.type = 'normal'
+            }
+            this.dplayer = this.initMp4Player(this.videoProp.coverUrl, urls)
+          } else if (urlType === 'flv') {
+            const urls = res.data.urls
+            const url = urls[0].url
+            this.dplayer = this.initFlvPlayer(this.videoProp.coverUrl, url)
+          } else {
+            this.message = 'url 类型无法识别'
+          }
+        } else {
+          console.error(res.msg)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    initMp4Player(coverUrl, videoUrls) {
+      return new DPlayer({
+        container: document.querySelector('#dplayer'),
+        lang: 'zh-cn',
+        logo: '/logo.png',
+        screenshot: false,
+        autoplay: true,
+        volume: 0.1,
+        mutex: true,
+        video: {
+          pic: coverUrl,
+          defaultQuality: 0,
+          quality: videoUrls
+        }
+      })
+    },
+    initFlvPlayer(coverUrl, videoUrl) {
+      return new DPlayer({
+        container: document.getElementById('dplayer'),
+        video: {
+          url: videoUrl,
+          type: 'customFlv',
+          customType: {
+            customFlv: function(video, player) {
+              const flvPlayer = flvjs.createPlayer({
+                type: 'flv',
+                url: video.src
+              })
+              flvPlayer.attachMediaElement(video)
+              flvPlayer.load()
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/post/PostList.vue

@@ -26,7 +26,7 @@
               <el-table-column
                 prop="coverUrl"
                 label="视频封面"
-                width="150">
+                width="80">
                 <template   slot-scope="scope">
                   <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
                 </template>
@@ -49,8 +49,7 @@
               </el-table-column>
               <el-table-column
                 prop="title"
-                label="标题"
-                width="180">
+                label="标题">
               </el-table-column>
               <el-table-column
                 prop="description"
@@ -89,8 +88,11 @@
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column label="操作">
+              <el-table-column label="操作" width="210">
                 <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    @click="handlePreview(scope.$index, scope.row)">预览</el-button>
                   <el-button
                     size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
@@ -233,17 +235,33 @@
         </el-tab-pane>
       </el-tabs>
     </el-col>
+
+    <!-- 视频预览对话框 -->
+    <el-dialog
+      title="预览视频"
+      append-to-body
+      :visible.sync="previewVideo"
+      :before-close="handleDialogClose"
+      width="70%"
+      center
+    >
+      <template>
+        <video-preview-player :video-prop.sync="this.videoProp"/>
+      </template>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
+import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
+
 import {getUserAlbums} from "@/api/image";
-import { userVideoList } from "@/api/video";
+import { userVideoList, videoInfo } from "@/api/video";
 import { getUserAudio } from "@/api/audio";
 
 export default {
   name: 'PostList',
-  components: {},
+  components: { VideoPreviewPlayer },
   data() {
     return {
       navList: [
@@ -253,7 +271,9 @@ export default {
       ],
       activeName: 'video',
       userId: 10001,
-      dataList: []
+      dataList: [],
+      previewVideo: false,
+      videoProp: null,
     }
   },
   created() {
@@ -282,6 +302,26 @@ export default {
     }
   },
   methods: {
+    handleDialogClose(done) {
+      this.previewVideo = false
+      this.videoProp = {
+        videoId: null,
+        play: false
+      }
+      done()
+    },
+    handlePreview(index, row) {
+      videoInfo(row.videoId).then(res => {
+        if (res.code === 0) {
+          this.previewVideo = true
+          this.videoProp = {
+            videoId: res.data.videoId,
+            play: true
+          }
+        }
+      })
+      console.log('预览 ' + row.videoId);
+    },
     handleEdit(index, row) {
       console.log(row.videoId);
       const path = '/post/edit/video/' + row.videoId