使用 dplayer 替换 xgplayer, 目前 dplayer 在播放 dash 视频时有点小问题,不会显示视频的总时长,但不影响播放. 后面再 debug 看是 mpd 文件的问题还是 dplayer 的问题

src/components/player/player.vue

@@ -4,18 +4,18 @@
 
 <script>
 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')
+const hls = require('hls.js')
+const dashjs = require('dashjs')
+const flv = require('flv.js')
+const DPlayer = require('dplayer')
 export default {
   name: 'Play',
   data() {
     return {
-      Mp4Player,
-      HlsPlayer,
-      DashPlayer,
-      FlvPlayer,
+      hls,
+      dashjs,
+      flv,
+      DPlayer,
       videoId: ''
     }
   },
@@ -34,29 +34,6 @@ export default {
     // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
     danmakuConfig() {
     },
-    /* videoUrl() {
-      fetch(`/api/media/video/url/${this.videoId}`, {
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8',
-          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
-        },
-        method: 'GET',
-        credentials: 'include'
-      }).then(response => response.json())
-        .then(json => {
-          if (json.code === 0) {
-            var coverUrl = json.data.coverUrl
-            var videoUrl = json.data.videoUrl
-            this.initDplayer(this.videoId, coverUrl, videoUrl)
-          } else {
-            // TODO 显示错误信息
-            // this.$router.push('/')
-          }
-        })
-        .catch(e => {
-          return null
-        })
-    },*/
     getVideoUrl(videoId) {
       videoUrl(videoId)
         .then(res => {
@@ -90,112 +67,116 @@ export default {
         })
     },
     initMp4Player(videoId, coverUrl, videoUrl) {
-      const player = new Mp4Player({
-        id: 'dplayer',
+      const vidId = videoId
+      const player = new DPlayer({
+        container: document.querySelector('#dplayer'),
+        lang: 'zh-cn',
         autoplay: false,
-        keyShortcut: 'on',
-        volume: 0.3,
-        url: videoUrl,
-        poster: coverUrl,
-        playsinline: true,
-        /* 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: [
-            {
-              duration: 15000,
-              id: '1',
-              start: 3000,
-              txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
-              style: { // 弹幕自定义样式
-                color: '#ff9500',
-                fontSize: '20px',
-                border: 'solid 1px #ff9500',
-                borderRadius: '50px',
-                padding: '5px 11px',
-                backgroundColor: 'rgba(255, 255, 255, 0.1)'
-              }
-            }
-          ],
-          area: {
-            start: 0,
-            end: 1
-          }
+        screenshot: true,
+        video: {
+          pic: coverUrl,
+          url: videoUrl,
+          type: 'auto'
+          // type: 'dash'
         },
-        width: 1200,
-        height: 480
+        logo: '/logo.png',
+        danmaku: {
+          id: videoId,
+          maximum: 10000,
+          api: '/api/media/danmaku/',
+          token: 'hertube',
+          user: this.userId,
+          bottom: '15%',
+          unlimited: true
+        }
       })
 
+      // 跳转到指定秒
+      // dp.seek(100)
+
       player.on('play', function() {
-        console.log(videoId + ' 视频播放')
+        console.log(vidId + ' 播放开始' + player.video.currentTime)
       })
 
       player.on('pause', function() {
-        console.log(videoId + ' 视频暂停')
+        console.log(vidId + ' 播放暂停' + player.video.currentTime)
       })
 
       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
+        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
+        console.log(vidId + ' 播放结束' + player.video.currentTime)
       })
 
-      player.on('play', function() {
-        console.log(videoId + ' 视频播放')
-      })
-    },
-    initDashPlayer(videoId, coverUrl, videoUrl) {
-      const player = new DashPlayer({
-        id: 'dplayer',
-        url: videoUrl,
-        poster: coverUrl,
-        ignores: ['error'],
-        playsinline: true,
-        width: 1200,
-        height: 480
+      player.on('seeking', function() {
+        console.log(vidId + ' seeking 事件 ' + player.video.currentTime)
       })
 
-      player.on('play', function() {
-        console.log(videoId + ' 视频播放')
+      player.on('seeked', function() {
+        console.log(vidId + ' seeked 事件' + player.video.currentTime)
       })
 
-      player.on('timeupdate', function() {
-        console.log(videoId + ' 播放时间改变')
+      const interval = 5
+      var i = 0
+      player.on('progress', function() {
+        console.log('i = ' + i)
+        if (i % interval === 0) {
+          // TODO 每 5s 向后端报告一次播放进度
+          console.log(vidId + ' 播放进度 ' + player.video.currentTime)
+        }
+        i++
       })
     },
-    initFlvPlayer(videoId, coverUrl, videoUrl) {
-      const player = new FlvPlayer({
-        id: 'dplayer',
-        url: videoUrl,
-        poster: coverUrl,
-        isLive: true,
-        playsinline: true,
-        width: 1200,
-        height: 480
+    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'
       })
-
-      player.on('play', function() {
-        console.log(videoId + ' 视频播放')
+    },
+    initDashPlayer(videoId, coverUrl, videoUrl) {
+      console.log('初始化 dash 播放器')
+      const dp = new DPlayer({
+        container: document.getElementById('dplayer'),
+        video: {
+          url: videoUrl,
+          type: 'dash'
+        },
+        pluginOptions: {
+          dash: {
+            // dash config
+          }
+        }
       })
-
-      player.on('timeupdate', function() {
-        console.log(videoId + ' 播放时间改变')
+      console.log(dp.plugins.dash)
+    },
+    initFlvPlayer(videoId, coverUrl, videoUrl) {
+      console.log('初始化 flv 播放器')
+      const dp = new DPlayer({
+        container: document.getElementById('dplayer'),
+        video: {
+          url: videoUrl,
+          type: 'flv'
+        },
+        pluginOptions: {
+          flv: {
+            // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
+            mediaDataSource: {
+              // mediaDataSource config
+            },
+            config: {
+              // config
+            }
+          }
+        }
       })
+      console.log(dp.plugins.flv) // flv 实例
     }
   }
 }

src/components/player/player2.vue → src/components/player/player1.vue

@@ -4,19 +4,18 @@
 
 <script>
 import { videoUrl } from '@/api/media/video'
-import DPlayer from 'dplayer'
-const hls = require('hls.js')
-const dashjs = require('dashjs')
-const ShakaPlayer = require('shaka-player')
-const flv = require('flv.js')
+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() {
     return {
-      flv,
-      dashjs,
-      hls,
-      ShakaPlayer,
+      Mp4Player,
+      HlsPlayer,
+      DashPlayer,
+      FlvPlayer,
       videoId: ''
     }
   },
@@ -72,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 类型')
             }
@@ -89,102 +90,111 @@ export default {
         })
     },
     initMp4Player(videoId, coverUrl, videoUrl) {
-      const vidId = videoId
-      const player = new DPlayer({
-        container: document.querySelector('#dplayer'),
-        lang: 'zh-cn',
+      const player = new Mp4Player({
+        id: 'dplayer',
         autoplay: false,
-        screenshot: true,
-        video: {
-          pic: coverUrl,
-          url: videoUrl,
-          type: 'auto'
-          // type: 'dash'
+        keyShortcut: 'on',
+        volume: 0.3,
+        url: videoUrl,
+        poster: coverUrl,
+        playsinline: true,
+        /* 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: [
+            {
+              duration: 15000,
+              id: '1',
+              start: 3000,
+              txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
+              style: { // 弹幕自定义样式
+                color: '#ff9500',
+                fontSize: '20px',
+                border: 'solid 1px #ff9500',
+                borderRadius: '50px',
+                padding: '5px 11px',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)'
+              }
+            }
+          ],
+          area: {
+            start: 0,
+            end: 1
+          }
         },
-        logo: '/logo.png',
-        danmaku: {
-          id: videoId,
-          maximum: 10000,
-          api: '/api/media/danmaku/',
-          token: 'hertube',
-          user: this.userId,
-          bottom: '15%',
-          unlimited: true
-        }
+        width: 1200,
+        height: 480
       })
 
-      // 跳转到指定秒
-      // dp.seek(100)
-
       player.on('play', function() {
-        console.log(vidId + ' 播放开始' + player.video.currentTime)
+        console.log(videoId + ' 视频播放')
       })
 
       player.on('pause', function() {
-        console.log(vidId + ' 播放暂停' + player.video.currentTime)
+        console.log(videoId + ' 视频暂停')
       })
 
       player.on('ended', function() {
-        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        console.log(vidId + ' 播放结束' + player.video.currentTime)
+        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
       })
 
-      player.on('seeking', function() {
-        console.log(vidId + ' seeking 事件 ' + player.video.currentTime)
+      player.on('play', function() {
+        console.log(videoId + ' 视频播放')
+      })
+    },
+    initDashPlayer(videoId, coverUrl, videoUrl) {
+      const player = new DashPlayer({
+        id: 'dplayer',
+        url: videoUrl,
+        poster: coverUrl,
+        ignores: ['error'],
+        playsinline: true,
+        width: 1200,
+        height: 480
       })
 
-      player.on('seeked', function() {
-        console.log(vidId + ' seeked 事件' + player.video.currentTime)
+      player.on('play', function() {
+        console.log(videoId + ' 视频播放')
       })
 
-      const interval = 5
-      var i = 0
-      player.on('progress', function() {
-        console.log('i = ' + i)
-        if (i % interval === 0) {
-          // TODO 每 5s 向后端报告一次播放进度
-          console.log(vidId + ' 播放进度 ' + player.video.currentTime)
-        }
-        i++
+      player.on('timeupdate', function() {
+        console.log(videoId + ' 播放时间改变')
       })
     },
-    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'
+    initFlvPlayer(videoId, coverUrl, videoUrl) {
+      const player = new FlvPlayer({
+        id: 'dplayer',
+        url: videoUrl,
+        poster: coverUrl,
+        isLive: true,
+        playsinline: true,
+        width: 1200,
+        height: 480
       })
-    },
-    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'
+
+      player.on('play', function() {
+        console.log(videoId + ' 视频播放')
+      })
+
+      player.on('timeupdate', function() {
+        console.log(videoId + ' 播放时间改变')
       })
     }
   }