dplayer 和 xgplayer

package-lock.json

@@ -5707,6 +5707,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",
@@ -10048,11 +10057,11 @@
       }
     },
     "shaka-player": {
-      "version": "2.5.23",
-      "resolved": "https://registry.npmmirror.com/shaka-player/download/shaka-player-2.5.23.tgz",
-      "integrity": "sha1-25LRxs8jFPAYCizsEbDi8lYDNvU=",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/shaka-player/download/shaka-player-3.2.1.tgz",
+      "integrity": "sha1-vHo8NADrggTEqixhvEL/obCLIo8=",
       "requires": {
-        "eme-encryption-scheme-polyfill": "^2.0.1"
+        "eme-encryption-scheme-polyfill": "^2.0.3"
       }
     },
     "shallow-clone": {
@@ -12314,6 +12323,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",
@@ -12522,6 +12536,16 @@
       "integrity": "sha1-HqhYsHe5l8brAtvMZZgwliu1po8=",
       "requires": {
         "shaka-player": "^2.4.0"
+      },
+      "dependencies": {
+        "shaka-player": {
+          "version": "2.5.23",
+          "resolved": "https://registry.npmmirror.com/shaka-player/download/shaka-player-2.5.23.tgz",
+          "integrity": "sha1-25LRxs8jFPAYCizsEbDi8lYDNvU=",
+          "requires": {
+            "eme-encryption-scheme-polyfill": "^2.0.1"
+          }
+        }
       }
     },
     "xgplayer-subtitles": {

package.json

@@ -19,7 +19,10 @@
     "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": "^1.1.2",
     "js-cookie": "2.2.0",
+    "shaka-player": "^3.2.1",
     "vue": "^2.6.12",
     "vue-cookies": "^1.7.4",
     "vue-filepond": "^6.0.3",

src/components/player/player.vue

@@ -159,12 +159,20 @@ export default {
       const player = new DashPlayer({
         id: 'dplayer',
         url: videoUrl,
+        poster: coverUrl,
         ignores: ['error'],
         playsinline: true,
         width: 1200,
         height: 480
       })
-      console.log(player)
+
+      player.on('play', function() {
+        console.log(videoId + ' 视频播放')
+      })
+
+      player.on('timeupdate', function() {
+        console.log(videoId + ' 播放时间改变')
+      })
     }
   }
 }

src/components/player/player2.vue

@@ -5,15 +5,18 @@
 <script>
 import { videoUrl } from '@/api/media/video'
 import DPlayer from 'dplayer'
-// const dashjs = require('dashjs')
-const flv = require('flv.js')
 const hls = require('hls.js')
+const dashjs = require('dashjs')
+const ShakaPlayer = require('shaka-player')
+const flv = require('flv.js')
 export default {
   name: 'Play',
   data() {
     return {
       flv,
+      dashjs,
       hls,
+      ShakaPlayer,
       videoId: ''
     }
   },
@@ -62,7 +65,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,
@@ -76,9 +88,9 @@ export default {
           this.$message.error(error.message)
         })
     },
-    initDplayer(videoId, coverUrl, videoUrl) {
+    initMp4Player(videoId, coverUrl, videoUrl) {
       const vidId = videoId
-      const dp = new DPlayer({
+      const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
         autoplay: false,
@@ -104,37 +116,76 @@ export default {
       // 跳转到指定秒
       // dp.seek(100)
 
-      dp.on('play', function() {
-        console.log(vidId + ' 播放开始' + dp.video.currentTime)
+      player.on('play', function() {
+        console.log(vidId + ' 播放开始' + player.video.currentTime)
       })
 
-      dp.on('pause', function() {
-        console.log(vidId + ' 播放暂停' + dp.video.currentTime)
+      player.on('pause', function() {
+        console.log(vidId + ' 播放暂停' + player.video.currentTime)
       })
 
-      dp.on('ended', function() {
+      player.on('ended', function() {
         // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        console.log(vidId + ' 播放结束' + dp.video.currentTime)
+        console.log(vidId + ' 播放结束' + player.video.currentTime)
       })
 
-      dp.on('seeking', function() {
-        console.log(vidId + ' seeking 事件 ' + dp.video.currentTime)
+      player.on('seeking', function() {
+        console.log(vidId + ' seeking 事件 ' + player.video.currentTime)
       })
 
-      dp.on('seeked', function() {
-        console.log(vidId + ' seeked 事件' + dp.video.currentTime)
+      player.on('seeked', function() {
+        console.log(vidId + ' seeked 事件' + player.video.currentTime)
       })
 
       const interval = 5
       var i = 0
-      dp.on('progress', function() {
+      player.on('progress', function() {
         console.log('i = ' + i)
         if (i % interval === 0) {
           // TODO 每 5s 向后端报告一次播放进度
-          console.log(vidId + ' 播放进度 ' + dp.video.currentTime)
+          console.log(vidId + ' 播放进度 ' + player.video.currentTime)
         }
         i++
       })
+    },
+    initHlsPlayer(videoId, coverUrl, videoUrl) {
+      new DPlayer({
+        container: document.querySelector('#dplayer'),
+        lang: 'zh-cn',
+        autoplay: false,
+        screenshot: true,
+        video: {
+          pic: coverUrl,
+          url: videoUrl,
+          type: 'hls'
+        },
+        logo: '/logo.png'
+      })
+    },
+    initDashPlayer(videoId, coverUrl, videoUrl) {
+      console.log('初始化 dash 播放器')
+      new DPlayer({
+        container: document.querySelector('#dplayer'),
+        lang: 'zh-cn',
+        autoplay: false,
+        screenshot: true,
+        video: {
+          pic: coverUrl,
+          url: videoUrl,
+          type: 'shakaDash',
+          customType: {
+            shakaDash: function(video, player) {
+              console.log(video)
+              console.log(player)
+              console.log('-------------------')
+              var src = video.src
+              var playerShaka = new ShakaPlayer(video) // 将会修改 video.src
+              playerShaka.load(src)
+            }
+          }
+        },
+        logo: '/logo.png'
+      })
     }
   }
 }