播放 dash 视频

src/components/player/player.vue

@@ -10,7 +10,8 @@ export default {
   name: 'Play',
   data() {
     return {
-      ShakaJsPlayer,
+      Player,
+      // ShakaJsPlayer,
       videoId: ''
     }
   },
@@ -74,13 +75,7 @@ export default {
         })
     },
     initDplayer(videoId, coverUrl, videoUrl) {
-      console.log('初始化播放器')
-      /* const player = new ShakaJsPlayer({
-        id: 'dplayer',
-        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/dash/xgplayer-demo-dash.mpd'
-      })*/
-
-      const player = new Player({
+      /* const player = new Player({
         id: 'dplayer',
         autoplay: false,
         keyShortcut: 'on',
@@ -119,13 +114,23 @@ export default {
           }
         },
         width: 1200,
-        height: 480,
-        whitelist: ['']
+        height: 480
       })
-      // player.emit('resourceReady', [{ name: '高清', url: 'url1' }, { name: '超清', url: 'url2' }])
+
       player.on('play', function() {
         console.log('视频播放')
+      })*/
+
+      console.log('videoUrl ->' + videoUrl)
+      const dashPlayer = new ShakaJsPlayer({
+        id: 'dplayer',
+        url: videoUrl,
+        ignores: ['error'],
+        playsinline: true,
+        width: 1200,
+        height: 480
       })
+      console.log(dashPlayer)
     }
   }
 }

src/components/player/player2.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="dplayer" ref="dplayer" />
+</template>
+
+<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')
+export default {
+  name: 'Play',
+  data() {
+    return {
+      flv,
+      hls,
+      videoId: ''
+    }
+  },
+  mounted() {
+    const userInfo = this.$store.state.user.userInfo
+    if (userInfo != null) {
+      this.userId = userInfo.id.toString()
+    } else {
+      this.userId = 111222333
+    }
+
+    this.videoId = this.$route.params.id
+    this.getVideoUrl(this.videoId)
+  },
+  methods: {
+    // 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 => {
+          if (res.code === 0) {
+            // TODO 返回一个 dplayer 播放器对象，包含一些常用的属性
+            var coverUrl = res.data.coverUrl
+            var videoUrl = res.data.videoUrl
+            this.initDplayer(this.videoId, coverUrl, videoUrl)
+          } else {
+            this.$notify({
+              title: res.code,
+              message: res.msg,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
+    },
+    initDplayer(videoId, coverUrl, videoUrl) {
+      const vidId = videoId
+      const dp = new DPlayer({
+        container: document.querySelector('#dplayer'),
+        lang: 'zh-cn',
+        autoplay: false,
+        screenshot: true,
+        video: {
+          pic: coverUrl,
+          url: videoUrl,
+          type: 'auto'
+          // type: 'dash'
+        },
+        logo: '/logo.png',
+        danmaku: {
+          id: videoId,
+          maximum: 10000,
+          api: '/api/media/danmaku/',
+          token: 'hertube',
+          user: this.userId,
+          bottom: '15%',
+          unlimited: true
+        }
+      })
+
+      // 跳转到指定秒
+      // dp.seek(100)
+
+      dp.on('play', function() {
+        console.log(vidId + ' 播放开始' + dp.video.currentTime)
+      })
+
+      dp.on('pause', function() {
+        console.log(vidId + ' 播放暂停' + dp.video.currentTime)
+      })
+
+      dp.on('ended', function() {
+        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
+        console.log(vidId + ' 播放结束' + dp.video.currentTime)
+      })
+
+      dp.on('seeking', function() {
+        console.log(vidId + ' seeking 事件 ' + dp.video.currentTime)
+      })
+
+      dp.on('seeked', function() {
+        console.log(vidId + ' seeked 事件' + dp.video.currentTime)
+      })
+
+      const interval = 5
+      var i = 0
+      dp.on('progress', function() {
+        console.log('i = ' + i)
+        if (i % interval === 0) {
+          // TODO 每 5s 向后端报告一次播放进度
+          console.log(vidId + ' 播放进度 ' + dp.video.currentTime)
+        }
+        i++
+      })
+    }
+  }
+}
+</script>
+
+<style>
+#dplayer {
+  height: 500px;
+}
+</style>