tnbapp/src/components/player/player.vue

<template>
  <div id="dplayer" ref="dplayer" />
</template>

<script>
import { videoUrl } from '@/api/media/video'
import DPlayer from 'dplayer'
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.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'
        },
        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>