修改视频播放进度数据的提交间隔

src/components/VideoPlayer.vue

@@ -20,6 +20,8 @@ export default {
   },
   data() {
     return {
+      wsClient: null,
+      intervalEvent: null,
       flvjs,
       DPlayer,
       danmaku: {
@@ -43,12 +45,12 @@ export default {
     getVideoUrl(videoId) {
       videoUrl(videoId).then(res => {
         if (res.code === 0) {
-          var event = false
+          var sendEvent = false
           if (this.userToken != null) {
             const wsUrl = 'ws:' + process.env.VUE_APP_SERVER_URL + '/ws/progress?token=' + this.userToken
             this.wsClient = new SocketInstance(wsUrl)
             this.wsClient.connect()
-            event = true
+            sendEvent = true
           }
 
           const urlType = res.data.type
@@ -57,10 +59,10 @@ export default {
             for (const url of urls) {
               url.type = 'normal'
             }
-            this.initMp4Player(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime, event)
+            this.initMp4Player(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime, sendEvent)
           } else if (urlType === 'flv') {
             const urls = res.data.urls
-            this.initFlvPlayer(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime, event)
+            this.initFlvPlayer(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime, sendEvent)
           } else {
             this.$notify.error({
               message: '视频 url 类型不合法',
@@ -86,7 +88,7 @@ export default {
     danmakuConfig() {
       // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
     },
-    initMp4Player(userId, videoId, coverUrl, urls, pos, event) {
+    initMp4Player(userId, videoId, coverUrl, urls, pos, sendEvent) {
       const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
@@ -115,35 +117,44 @@ export default {
       // 跳转到上次看到的位置
       player.seek(pos)
 
+      var ended = false
       /* 事件绑定 */
-      player.on('progress', function() {
-        if (event) {
-          const payload = {}
-          payload.mediaId = videoId
-          payload.mediaType = 1
-          payload.currentTime = player.video.currentTime
-          payload.ended = false
-
-          const jsonData = {}
-          jsonData.event = 'progress'
-          jsonData.payload = JSON.stringify(payload)
-          this.wsClient.send(jsonData)
+      const that = this
+      player.on('play', function() {
+        if (sendEvent) {
+          clearInterval(that.intervalEvent)
+          that.intervalEvent = setInterval(() => {
+            if (!ended) {
+              const payload = {}
+              payload.mediaId = videoId
+              payload.mediaType = 1
+              payload.currentTime = player.video.currentTime
+              payload.ended = ended
+
+              const jsonData = {}
+              jsonData.event = 'media_progress'
+              jsonData.payload = JSON.stringify(payload)
+
+              that.wsClient.send(jsonData)
+            }
+          }, 5000)
         }
       })
-
       player.on('ended', () => {
-        if (event) {
+        clearInterval(that.intervalEvent)
+        ended = true
+        if (sendEvent) {
           const payload = {}
           payload.mediaId = videoId
           payload.mediaType = 1
           payload.currentTime = player.video.currentTime
-          payload.ended = true
+          payload.ended = ended
 
           const jsonData = {}
-          jsonData.event = 'progress'
+          jsonData.event = 'media_progress'
           jsonData.payload = JSON.stringify(payload)
-          console.log(jsonData)
-          this.wsClient.send(jsonData)
+
+          that.wsClient.send(jsonData)
         }
       })
 
@@ -151,7 +162,7 @@ export default {
         console.log('声音改变')
       })
     },
-    initFlvPlayer(userId, videoId, coverUrl, urls, pos, event) {
+    initFlvPlayer(userId, videoId, coverUrl, urls, pos, sendEvent) {
       const player = new DPlayer({
         container: document.getElementById('dplayer'),
         lang: 'zh-cn',
@@ -180,38 +191,9 @@ export default {
 
       // 跳转到上次看到的位置
       player.seek(pos)
-
       /* 事件绑定 */
-      player.on('progress', function() {
-        if (event) {
-          const payload = {}
-          payload.mediaId = videoId
-          payload.mediaType = 1
-          payload.currentTime = player.video.currentTime
-          payload.ended = false
-
-          const jsonData = {}
-          jsonData.event = 'progress'
-          jsonData.payload = JSON.stringify(payload)
-          this.wsClient.send(jsonData)
-        }
-      })
-
       player.on('ended', () => {
-        if (event) {
-          const payload = {}
-          payload.mediaId = videoId
-          payload.mediaType = 1
-          payload.currentTime = player.video.currentTime
-          payload.ended = true
-
-          const jsonData = {}
-          jsonData.event = 'progress'
-          jsonData.payload = JSON.stringify(payload)
-          this.wsClient.send(jsonData)
-        }
       })
-
       player.on('volumechange', () => {
         console.log('声音改变')
       })

src/views/home/PlaylistView.vue

@@ -222,7 +222,6 @@
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import UserAvatarCard from '@/components/card/UserAvatarCard'
 import comment from '@/components/comment'
-import SocketInstance from '@/utils/ws/socket-instance'
 
 import flvjs from 'flv.js'
 import DPlayer from 'dplayer'
@@ -404,9 +403,7 @@ export default {
         if (res.code === 0) {
           const token = getAccessToken()
           if (token != null) {
-            const wsUrl = 'ws:' + process.env.VUE_APP_SERVER_URL + '/ws/progress?token=' + token
-            this.wsClient = new SocketInstance(wsUrl)
-            this.wsClient.connect()
+            var wsUrl = 'ws:' + process.env.VUE_APP_SERVER_URL + '/ws/progress?token=' + token
           }
 
           const urlType = res.data.type
@@ -470,18 +467,9 @@ export default {
 
       /* 事件绑定 */
       player.on('progress', function() {
-        const jsonData = {}
-        jsonData.videoId = videoId
-        jsonData.currentTime = player.video.currentTime
-        this.wsClient.send(jsonData)
       })
 
       player.on('ended', () => {
-        const jsonData = {}
-        jsonData.videoId = videoId
-        jsonData.currentTime = player.video.currentTime
-        this.wsClient.send(jsonData)
-        // this.getNextPath(videoId)
         this.$message.info('当前视频播放完成')
       })