xgplayer 中添加一个用于直播的 flv 播放器

package-lock.json

@@ -2580,8 +2580,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "balloon-css": {
       "version": "1.2.0",
@@ -2783,7 +2782,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
       "integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3612,8 +3610,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -5811,8 +5808,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "2.1.3",
@@ -5902,7 +5898,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz",
       "integrity": "sha1-FB8zuBp8JJLhJVlDB0gMRmeSeKY=",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -6496,7 +6491,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -6505,8 +6499,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz",
-      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=",
-      "dev": true
+      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w="
     },
     "inquirer": {
       "version": "7.3.3",
@@ -7606,7 +7599,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz",
       "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -8181,7 +8173,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/once/download/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -8443,8 +8434,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -12323,6 +12313,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "webworkify": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/webworkify/download/webworkify-1.5.0.tgz",
+      "integrity": "sha1-c0rYendN5uvdVG4dPgJ9pbj0pCw="
+    },
     "webworkify-webpack": {
       "version": "2.1.5",
       "resolved": "https://registry.nlark.com/webworkify-webpack/download/webworkify-webpack-2.1.5.tgz",
@@ -12399,8 +12394,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "1.0.3",
@@ -12447,6 +12441,16 @@
         }
       }
     },
+    "xgplayer-flv.js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.nlark.com/xgplayer-flv.js/download/xgplayer-flv.js-2.3.0.tgz",
+      "integrity": "sha1-fzsPMZwJG2ExQRY5E+O1woHFDD4=",
+      "requires": {
+        "es6-promise": "^4.2.4",
+        "glob": "^7.1.2",
+        "webworkify": "^1.5.0"
+      }
+    },
     "xgplayer-helper-codec": {
       "version": "2.4.32-3",
       "resolved": "https://registry.npmmirror.com/xgplayer-helper-codec/download/xgplayer-helper-codec-2.4.32-3.tgz",

package.json

@@ -31,6 +31,7 @@
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^4.1.0",
     "xgplayer": "^2.31.4",
+    "xgplayer-flv.js": "^2.3.0",
     "xgplayer-hls": "^2.4.32-3",
     "xgplayer-hls.js": "^2.6.1",
     "xgplayer-shaka": "^1.1.5"

src/components/player/player.vue

@@ -7,6 +7,7 @@ import { videoUrl } from '@/api/media/video'
 const Mp4Player = require('xgplayer')
 const HlsPlayer = require('xgplayer-hls.js')
 const DashPlayer = require('xgplayer-shaka')
+const FlvPlayer = require('xgplayer-flv.js')
 export default {
   name: 'Play',
   data() {
@@ -14,6 +15,7 @@ export default {
       Mp4Player,
       HlsPlayer,
       DashPlayer,
+      FlvPlayer,
       videoId: ''
     }
   },
@@ -69,6 +71,8 @@ export default {
               this.initHlsPlayer(this.videoId, coverUrl, videoUrl)
             } else if (urlType === 'dash') {
               this.initDashPlayer(this.videoId, coverUrl, videoUrl)
+            } else if (urlType === 'flv') {
+              this.initFlvPlayer(this.videoId, coverUrl, videoUrl)
             } else {
               console.log('无法识别 url 类型')
             }
@@ -170,6 +174,25 @@ export default {
         console.log(videoId + ' 视频播放')
       })
 
+      player.on('timeupdate', function() {
+        console.log(videoId + ' 播放时间改变')
+      })
+    },
+    initFlvPlayer(videoId, coverUrl, videoUrl) {
+      const player = new FlvPlayer({
+        id: 'dplayer',
+        url: videoUrl,
+        poster: coverUrl,
+        isLive: true,
+        playsinline: true,
+        width: 1200,
+        height: 480
+      })
+
+      player.on('play', function() {
+        console.log(videoId + ' 视频播放')
+      })
+
       player.on('timeupdate', function() {
         console.log(videoId + ' 播放时间改变')
       })

src/components/upload/filepond-upload.vue

@@ -56,7 +56,8 @@ export default {
             'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
           },
           ondata: (formData) => {
-            formData.append('userId', 12345678909)
+            // TODO 根据登录状态获取 userId
+            formData.append('userId', 1101269176320)
             return formData
           },
           onload(res) {