tnbapp/src/components/player/player.vue

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

<script>
import { videoUrl, submitPlayRecord } from '@/api/media/video'
const hls = require('hls.js')
const dashjs = require('dashjs')
const flv = require('flv.js')
const DPlayer = require('dplayer')

export default {
  name: 'Play',
  data() {
    return {
      hls,
      dashjs,
      flv,
      DPlayer,
      userId: 0,
      videoId: '',
      playRecord: null
    }
  },
  mounted() {
    const userInfo = this.$store.state.user.userInfo
    if (userInfo != null) {
      this.userId = userInfo.userId
    }

    this.videoId = this.$route.params.id
    videoUrl(this.$route.params.id)
      .then(res => {
        if (res.code === 0) {
          // TODO 返回一个 dplayer 播放器对象，包含一些常用的属性
          var coverUrl = res.data.coverUrl
          var videoUrl = res.data.videoUrl
          var urlType = res.data.urlType
          if (urlType === 'mp4') {
            this.initMp4Player(this.userId, 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 if (urlType === 'flv') {
            this.initFlvPlayer(this.videoId, coverUrl, videoUrl)
          } else {
            console.log('无法识别 url 类型')
          }
        } else {
          console.error(res.msg)
        }
      }).catch(error => {
        console.error(error.message)
      })
  },
  methods: {
    // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
    danmakuConfig() {
    },
    submitVideoPlayRecord(currentTime) {
      if (this.playRecord == null) {
        return
      }

      this.playRecord.currentTime = currentTime
      submitPlayRecord(this.playRecord)
        .then(res => {
          if (res.code === 0) {
            console.log('播放进度已发送')
          } else {
            console.error(res.msg)
          }
        }).catch(error => {
          console.error(error.message)
        })
    },
    initMp4Player(userId, videoId, coverUrl, videoUrl) {
      const player = new DPlayer({
        container: document.querySelector('#dplayer'),
        lang: 'zh-cn',
        logo: '/logo.png',
        autoplay: false,
        screenshot: true,
        video: {
          pic: coverUrl,
          url: videoUrl,
          type: 'auto'
        },
        danmaku: {
          id: videoId,
          maximum: 10000,
          api: '//api.reghao.cn/api/comment/danmaku/',
          token: 'hertube',
          user: userId,
          bottom: '15%',
          unlimited: true
        }
      })

      if (userId !== 0) {
        console.log('初始化 playRecord')
        this.playRecord = {
          'userId': this.userId,
          'videoId': this.videoId,
          'currentTime': 0.0
        }
      }

      // 跳转到指定秒
      // dp.seek(100)
      player.on('play', function() {
        console.log('mp4Player 开始播放事件' + this.userId)
        console.log(this.playRecord)
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('pause', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('ended', function() {
        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('seeking', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('seeked', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      var i = 0
      player.on('progress', function() {
        console.log('i = ' + i)
        if (i % 5 === 0) {
          if (this.playRecord == null) {
            return
          }

          this.playRecord.currentTime = player.video.currentTime
          submitPlayRecord(this.playRecord)
            .then(res => {
            }).catch(error => {
              console.error(error.message)
            })
        }
        i++
      })
    },
    initHlsPlayer(videoId, coverUrl, videoUrl) {
      const player = new DPlayer({
        container: document.querySelector('#dplayer'),
        lang: 'zh-cn',
        autoplay: false,
        screenshot: true,
        video: {
          pic: coverUrl,
          url: videoUrl,
          type: 'hls'
        },
        logo: '/logo.png',
        danmaku: {
          id: videoId,
          maximum: 10000,
          api: '//api.reghao.cn/api/media/danmaku/',
          token: 'hertube',
          user: this.userId,
          videoId: videoId,
          bottom: '15%',
          unlimited: true
        }
      })

      player.on('play', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('pause', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('ended', function() {
        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('seeking', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      player.on('seeked', function() {
        if (this.playRecord == null) {
          return
        }

        this.playRecord.currentTime = player.video.currentTime
        submitPlayRecord(this.playRecord)
          .then(res => {
          }).catch(error => {
            console.error(error.message)
          })
      })

      var i = 0
      player.on('progress', function() {
        console.log('i = ' + i)
        if (i % 5 === 0) {
          if (this.playRecord == null) {
            return
          }

          this.playRecord.currentTime = player.video.currentTime
          submitPlayRecord(this.playRecord)
            .then(res => {
            }).catch(error => {
              console.error(error.message)
            })
        }
        i++
      })
    },
    initDashPlayer(videoId, coverUrl, videoUrl) {
      console.log('初始化 dash 播放器')
      const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
          url: videoUrl,
          type: 'dash'
        },
        pluginOptions: {
          dash: {
            // dash config
          }
        }
      })
      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 实例
    }
  }
}
</script>

<style>
#dplayer {
  height: 500px;
}
</style>