根据返回的值初始化 mp4, hls 和 dash 三种 url 格式的播放器

package-lock.json

@@ -3627,6 +3627,11 @@
         "typedarray": "^0.0.6"
       }
     },
+    "concat-typed-array": {
+      "version": "1.0.2",
+      "resolved": "https://registry.nlark.com/concat-typed-array/download/concat-typed-array-1.0.2.tgz",
+      "integrity": "sha1-Z4gMPOGez/EQwxWYtBx/RznUfKA="
+    },
     "connect-history-api-fallback": {
       "version": "1.6.0",
       "resolved": "https://registry.npm.taobao.org/connect-history-api-fallback/download/connect-history-api-fallback-1.6.0.tgz",
@@ -5702,15 +5707,6 @@
         "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",
@@ -6115,13 +6111,9 @@
       "dev": true
     },
     "hls.js": {
-      "version": "0.14.13",
-      "resolved": "https://registry.npm.taobao.org/hls.js/download/hls.js-0.14.13.tgz",
-      "integrity": "sha1-gkOVoGMcjjK/Do3gaHPx2Jd0uto=",
-      "requires": {
-        "eventemitter3": "^4.0.3",
-        "url-toolkit": "^2.1.6"
-      }
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/hls.js/download/hls.js-1.1.2.tgz",
+      "integrity": "sha512-ujditC4vvBmZd00RRNfNPLgFVlqEeUX4sAFv5lGhBHuql8iAZodOdlZTD3em/1zo7vyjQp12up/lCVqQk8dvxA=="
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -11338,11 +11330,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "url-toolkit": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npm.taobao.org/url-toolkit/download/url-toolkit-2.2.0.tgz",
-      "integrity": "sha1-mle4nzFdS33DQOFQvPpUjd9fXOk="
-    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@@ -12327,11 +12314,6 @@
       "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",
@@ -12451,6 +12433,89 @@
         }
       }
     },
+    "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",
+      "integrity": "sha1-acW8cVbWqsUTHTqO8PXIdSDYCJ8=",
+      "requires": {
+        "xgplayer-helper-utils": "2.4.32-3"
+      }
+    },
+    "xgplayer-helper-models": {
+      "version": "2.4.32-3",
+      "resolved": "https://registry.npmmirror.com/xgplayer-helper-models/download/xgplayer-helper-models-2.4.32-3.tgz",
+      "integrity": "sha1-7dnbb6mjCN7zIMBkSlf1fJ8UMDs="
+    },
+    "xgplayer-helper-transmuxers": {
+      "version": "2.4.32-3",
+      "resolved": "https://registry.npmmirror.com/xgplayer-helper-transmuxers/download/xgplayer-helper-transmuxers-2.4.32-3.tgz",
+      "integrity": "sha1-TcSI2oryewAFCciryYvJQTgLWZQ=",
+      "requires": {
+        "concat-typed-array": "^1.0.2",
+        "eventemitter3": "^4.0.7",
+        "xgplayer-helper-codec": "2.4.32-3",
+        "xgplayer-helper-models": "2.4.32-3",
+        "xgplayer-helper-utils": "2.4.32-3"
+      }
+    },
+    "xgplayer-helper-utils": {
+      "version": "2.4.32-3",
+      "resolved": "https://registry.npmmirror.com/xgplayer-helper-utils/download/xgplayer-helper-utils-2.4.32-3.tgz",
+      "integrity": "sha1-Ohe11OVpfbDZ+NcT9DsIwnizjms=",
+      "requires": {
+        "eventemitter3": "^4.0.7",
+        "xgplayer-helper-models": "2.4.32-3"
+      }
+    },
+    "xgplayer-hls": {
+      "version": "2.4.32-3",
+      "resolved": "https://registry.npmmirror.com/xgplayer-hls/download/xgplayer-hls-2.4.32-3.tgz",
+      "integrity": "sha1-ROQO4k4iqzhr8Waj5H0E5BLv8uM=",
+      "requires": {
+        "xgplayer-hls-live": "2.4.32-3",
+        "xgplayer-hls-vod": "2.4.32-3"
+      }
+    },
+    "xgplayer-hls-live": {
+      "version": "2.4.32-3",
+      "resolved": "https://registry.npmmirror.com/xgplayer-hls-live/download/xgplayer-hls-live-2.4.32-3.tgz",
+      "integrity": "sha1-MIXh1ZNzM2YHbFoMV0ZUkzWR3Js=",
+      "requires": {
+        "xgplayer-helper-codec": "2.4.32-3",
+        "xgplayer-helper-models": "2.4.32-3",
+        "xgplayer-helper-transmuxers": "2.4.32-3",
+        "xgplayer-helper-utils": "2.4.32-3"
+      }
+    },
+    "xgplayer-hls-vod": {
+      "version": "2.4.32-3",
+      "resolved": "https://registry.npmmirror.com/xgplayer-hls-vod/download/xgplayer-hls-vod-2.4.32-3.tgz",
+      "integrity": "sha1-6rpJWBgqStBmuTPY7dErCk+kjI4=",
+      "requires": {
+        "xgplayer-helper-codec": "2.4.32-3",
+        "xgplayer-helper-models": "2.4.32-3",
+        "xgplayer-helper-transmuxers": "2.4.32-3",
+        "xgplayer-helper-utils": "2.4.32-3"
+      }
+    },
+    "xgplayer-hls.js": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/xgplayer-hls.js/download/xgplayer-hls.js-2.6.1.tgz",
+      "integrity": "sha512-qxDolnKhW0E8hG1HPr21qBddvYCmMMYWLaUhUD2cZGvi1k+dXvC+JlhGkylWxEfY/J0lIqncaurDUYx/qT+bVw==",
+      "requires": {
+        "deepmerge": "2.0.1",
+        "event-emitter": "^0.3.5",
+        "eventemitter3": "^4.0.7",
+        "hls.js": "^1.1.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-2.0.1.tgz",
+          "integrity": "sha1-JcHCTxEPuRT4AAG5JSZN138/QxI="
+        }
+      }
+    },
     "xgplayer-shaka": {
       "version": "1.1.5",
       "resolved": "https://registry.npmmirror.com/xgplayer-shaka/download/xgplayer-shaka-1.1.5.tgz",

package.json

@@ -19,8 +19,6 @@
     "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",
     "js-cookie": "2.2.0",
     "vue": "^2.6.12",
     "vue-cookies": "^1.7.4",
@@ -30,6 +28,8 @@
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^4.1.0",
     "xgplayer": "^2.31.4",
+    "xgplayer-hls": "^2.4.32-3",
+    "xgplayer-hls.js": "^2.6.1",
     "xgplayer-shaka": "^1.1.5"
   },
   "devDependencies": {

src/components/player/player.vue

@@ -4,14 +4,16 @@
 
 <script>
 import { videoUrl } from '@/api/media/video'
-const Player = require('xgplayer')
-const ShakaJsPlayer = require('xgplayer-shaka')
+const Mp4Player = require('xgplayer')
+const HlsPlayer = require('xgplayer-hls.js')
+const DashPlayer = require('xgplayer-shaka')
 export default {
   name: 'Play',
   data() {
     return {
-      Player,
-      // ShakaJsPlayer,
+      Mp4Player,
+      HlsPlayer,
+      DashPlayer,
       videoId: ''
     }
   },
@@ -60,7 +62,16 @@ export default {
             // TODO 返回一个 dplayer 播放器对象，包含一些常用的属性
             var coverUrl = res.data.coverUrl
             var videoUrl = res.data.videoUrl
-            this.initDplayer(this.videoId, coverUrl, videoUrl)
+            var urlType = res.data.urlType
+            if (urlType === 'mp4') {
+              this.initMp4Player(this.videoId, coverUrl, videoUrl)
+            } else if (urlType === 'hls') {
+              this.initHlsPlayer(this.videoId, coverUrl, videoUrl)
+            } else if (urlType === 'dash') {
+              this.initDashPlayer(this.videoId, coverUrl, videoUrl)
+            } else {
+              console.log('无法识别 url 类型')
+            }
           } else {
             this.$notify({
               title: res.code,
@@ -74,8 +85,8 @@ export default {
           this.$message.error(error.message)
         })
     },
-    initDplayer(videoId, coverUrl, videoUrl) {
-      /* const player = new Player({
+    initMp4Player(videoId, coverUrl, videoUrl) {
+      const player = new Mp4Player({
         id: 'dplayer',
         autoplay: false,
         keyShortcut: 'on',
@@ -83,14 +94,14 @@ export default {
         url: videoUrl,
         poster: coverUrl,
         playsinline: true,
-        thumbnail: {
+        /* thumbnail: {
           pic_num: 44,
           width: 160,
           height: 90,
           col: 10,
           row: 10,
           urls: ['//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg']
-        },
+        },*/
         danmu: {
           comments: [
             {
@@ -118,11 +129,34 @@ export default {
       })
 
       player.on('play', function() {
-        console.log('视频播放')
-      })*/
+        console.log(videoId + ' 视频播放')
+      })
+
+      player.on('pause', function() {
+        console.log(videoId + ' 视频暂停')
+      })
+
+      player.on('ended', function() {
+        console.log(videoId + ' 视频结束')
+      })
+    },
+    initHlsPlayer(videoId, coverUrl, videoUrl) {
+      const player = new HlsPlayer({
+        id: 'dplayer',
+        url: videoUrl,
+        poster: coverUrl,
+        autoplay: false,
+        playsinline: true,
+        width: 1200,
+        height: 480
+      })
 
-      console.log('videoUrl ->' + videoUrl)
-      const dashPlayer = new ShakaJsPlayer({
+      player.on('play', function() {
+        console.log(videoId + ' 视频播放')
+      })
+    },
+    initDashPlayer(videoId, coverUrl, videoUrl) {
+      const player = new DashPlayer({
         id: 'dplayer',
         url: videoUrl,
         ignores: ['error'],
@@ -130,7 +164,7 @@ export default {
         width: 1200,
         height: 480
       })
-      console.log(dashPlayer)
+      console.log(player)
     }
   }
 }