对应后端视频上传接口的修改

package-lock.json

@@ -4807,6 +4807,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.8.tgz",
+      "integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo="
+    },
     "escalade": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.0.tgz?cache=0&sync_timestamp=1600103337623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.0.tgz",
@@ -5579,6 +5584,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.nlark.com/flv.js/download/flv.js-1.6.2.tgz",
+      "integrity": "sha1-+jNA/j9+4B05d/eHau5muENuWSI=",
+      "requires": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597059692702&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
@@ -12076,6 +12090,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.nlark.com/webworkify-webpack/download/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha1-v0M2YkwGJsvoXPH/3hV/eqkLHRw="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "filepond-plugin-image-edit": "^1.6.1",
     "filepond-plugin-image-exif-orientation": "^1.0.9",
     "filepond-plugin-image-preview": "^4.6.4",
+    "flv.js": "^1.6.2",
     "hls.js": "^0.14.13",
     "vue": "^2.6.12",
     "vue-cookies": "^1.7.4",

src/components/player/player.vue

@@ -5,11 +5,13 @@
 <script>
 import { videoUrl } from '@/api/media/video'
 import DPlayer from 'dplayer'
+const flv = require('flv.js')
 const hls = require('hls.js')
 export default {
   name: 'Play',
   data() {
     return {
+      flv,
       hls,
       videoId: ''
     }
@@ -56,6 +58,7 @@ export default {
       videoUrl(videoId)
         .then(res => {
           if (res.code === 0) {
+            // TODO 返回一个 dplayer 播放器对象，包含一些常用的属性
             var coverUrl = res.data.coverUrl
             var videoUrl = res.data.videoUrl
             this.initDplayer(this.videoId, coverUrl, videoUrl)
@@ -73,9 +76,11 @@ export default {
         })
     },
     initDplayer(videoId, coverUrl, videoUrl) {
-      new DPlayer({
+      const vidId = videoId
+      const dp = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
+        autoplay: false,
         screenshot: true,
         video: {
           pic: coverUrl,
@@ -93,6 +98,41 @@ export default {
           unlimited: true
         }
       })
+
+      // 跳转到指定秒
+      // dp.seek(100)
+
+      dp.on('play', function() {
+        console.log(vidId + ' 播放开始' + dp.video.currentTime)
+      })
+
+      dp.on('pause', function() {
+        console.log(vidId + ' 播放暂停' + dp.video.currentTime)
+      })
+
+      dp.on('ended', function() {
+        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
+        console.log(vidId + ' 播放结束' + dp.video.currentTime)
+      })
+
+      dp.on('seeking', function() {
+        console.log(vidId + ' seeking 事件 ' + dp.video.currentTime)
+      })
+
+      dp.on('seeked', function() {
+        console.log(vidId + ' seeked 事件' + dp.video.currentTime)
+      })
+
+      const interval = 5
+      var i = 0
+      dp.on('progress', function() {
+        console.log('i = ' + i)
+        if (i % interval === 0) {
+          // TODO 每 5s 向后端报告一次播放进度
+          console.log(vidId + ' 播放进度 ' + dp.video.currentTime)
+        }
+        i++
+      })
     }
   }
 }

src/components/upload/filepond-upload.vue

@@ -8,14 +8,14 @@
       label-file-processing-aborted="视频上传被取消"
       label-tap-to-retry="尝试重试"
       label-file-processing-complete="视频上传成功！"
-      :allow-multiple="false"
       accepted-file-types="video/*, .flv, .mkv"
+      :allow-multiple="false"
+      :instant-upload="true"
       :server="server"
       :files="myFiles"
       @init="handleFilePondInit"
       @processfile="success"
     />
-    <!-- :instant-upload="false" 关闭立即上传到服务器 -->
   </div>
 </template>
 
@@ -55,9 +55,8 @@ export default {
           headers: {
             'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
           },
-          onload(response) {
-            var resp = JSON.parse(response)
-            console.log('response -> ' + resp)
+          onload(res) {
+            var resp = JSON.parse(res)
             // 返回上传数据
             videMessage = resp
           }
@@ -69,12 +68,16 @@ export default {
   },
   methods: {
     handleFilePondInit() {
-      // console.log('FilePond has initialized')
+      console.log('FilePond has initialized')
       // FilePond instance methods are available on `this.$refs.pond`
     },
     success() {
       this.$emit('video', videMessage)
     },
+    cancelUpload() {
+      console.log('取消上传的文件')
+    },
+    // TODO 计算文件的 sha256 值，然后传递给后端做判断后再确定是否需要上传文件
     uploadCrt(param) {
       var contractFile = param.file
       var reader = new FileReader(); var self = this

src/components/upload/upload-video.vue

@@ -13,7 +13,7 @@
         <v-row justify="center">
           <v-col cols="10">
             <!-- <v-file-input prepend-icon="mdi-video" show-size counter accept="video/*,.flv" chips label="请选择视频文件" @change="setFile" /> -->
-            <FilePondUpdate @video="videoUploadSuccess" />
+            <FilePondUpload @video="videoUploadSuccess" />
           </v-col>
         </v-row>
         <v-row justify="center">
@@ -122,10 +122,10 @@
 </template>
 
 <script>
-import FilePondUpdate from '@/components/upload/filepond-upload.vue'
+import FilePondUpload from '@/components/upload/filepond-upload.vue'
 export default {
   components: {
-    FilePondUpdate
+    FilePondUpload
   },
   data() {
     return {
@@ -192,9 +192,8 @@ export default {
             this.showMessage = true
             this.$router.push('/studio')
           } else {
-            this.message = json.message
+            this.message = json.msg
             this.showMessage = true
-            return
           }
         })
         .catch(e => {
@@ -205,6 +204,7 @@ export default {
       this.files = []
       this.files.push(value)
     },
+    // filepond 组件上传文件完成时调用
     videoUploadSuccess(value) {
       if (value.code === 0) {
         this.videoInfo.infoId = value.data[0].infoId
@@ -217,8 +217,8 @@ export default {
         this.showMessage = true
       } else {
         // TODO 返回错误原因，网络错误或是服务端错误
-        if (value.message != null) {
-          this.message = '上传文件出现异常，请重新上传！' + value.message
+        if (value.msg != null) {
+          this.message = '上传文件出现异常，请重新上传！' + value.msg
         } else {
           this.message = '上传文件出现异常，请重新上传！'
         }

src/views/video/video.vue

@@ -101,7 +101,7 @@
           <Comment :count="videoData.commentCount" />
         </v-col>
         <v-col>
-          相关视频：
+          相关推荐:
           <v-row no-gutters>
             <v-col
               v-for="item in videoList"