tnbapp/src/components/VideoPlayer.vue

<template>
  <div id="dplayer" ref="dplayer" style="height: 480px;" />
</template>

<script>
import { videoUrl } from '@/api/video'
import SocketInstance from '@/utils/ws/socket-instance'

import flvjs from 'flv.js'
import DPlayer from 'dplayer'
import Vue from "vue";

export default {
  name: 'VideoPlayer',
  props: {
    videoProp: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      flvjs,
      DPlayer,
      danmaku: {
        api: '//api.reghao.cn/api/comment/danmaku/',
        token: 'bili'
      },
      getUrl: true
    }
  },
  created() {
  },
  mounted() {
    const videoId = this.videoProp.videoId
    if (this.getUrl) {
      this.getVideoUrl(videoId)
    }
  },
  methods: {
    getVideoUrl(videoId) {
      videoUrl(videoId).then(res => {
        if (res.code === 0) {
          const userdata = Vue.$cookies.get('USERDATA')
          if (userdata != null) {
            SocketInstance.connect()
          }

          const urlType = res.data.type
          if (urlType === 'mp4') {
            const urls = res.data.urls
            for (const url of urls) {
              url.type = 'normal'
            }
            this.initMp4Player(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime)
          } else if (urlType === 'flv') {
            const urls = res.data.urls
            const url = urls[0].url
            this.initFlvPlayer(videoId, this.videoProp.coverUrl, url)
          } else {
            this.$notify.error({
              message: '视频 url 类型不合法',
              type: 'warning',
              duration: 3000
            })
          }
        } else {
          this.$notify.error({
            message: '视频 url 获取失败',
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify.error({
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    danmakuConfig() {
      // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
    },
    initMp4Player(userId, videoId, coverUrl, urls, pos) {
      const player = new DPlayer({
        container: document.querySelector('#dplayer'),
        lang: 'zh-cn',
        logo: '/logo.png',
        screenshot: false,
        autoplay: true,
        volume: 0.1,
        mutex: true,
        video: {
          pic: coverUrl,
          defaultQuality: 0,
          quality: urls,
          hotkey: true
        },
        danmaku: {
          id: videoId,
          maximum: 10000,
          api: this.danmaku.api,
          token: this.danmaku.token,
          user: userId,
          bottom: '15%',
          unlimited: true
        }
      })

      // 设置音量
      // player.volume(0.1, true, false)
      // 跳转到上次看到的位置
      player.seek(pos)

      /* 事件绑定 */
      player.on('progress', function() {
        const jsonData = {}
        jsonData.videoId = videoId
        jsonData.currentTime = player.video.currentTime
        SocketInstance.send(jsonData)
      })

      player.on('ended', () => {
        const jsonData = {}
        jsonData.videoId = videoId
        jsonData.currentTime = player.video.currentTime
        SocketInstance.send(jsonData)

        /* const path = this.$route.path
        const nextPath = '/video/gz5RYkw1zn'
        if (path !== nextPath) {
          this.$router.push(nextPath)
        } else {
          console.log('视频播放完成')
        }*/
      })

      player.on('volumechange', () => {
        console.log('声音改变')
      })
    },
    initFlvPlayer(videoId, coverUrl, videoUrl) {
      new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
          url: videoUrl,
          type: 'customFlv',
          customType: {
            customFlv: function(video, player) {
              const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: video.src
              })
              flvPlayer.attachMediaElement(video)
              flvPlayer.load()
            }
          }
        }
      })
    }
  }
}
</script>

<style>
</style>