tnbapp/src/components/player/player.vue

<template>
  <div id="dplayer" ref="dplayer">
    <v-dialog
      v-model="permissionDialog"
      max-width="290"
    >
      <v-card>
        <v-card-title class="headline">VIP 观看</v-card-title>
        <v-card-text>
          <span>您还不是 VIP, 本视频仅供 VIP 观看</span>
        </v-card-text>

        <v-card-actions>
          <v-spacer />
          <v-btn
            color="green darken-1"
            text
            @click="gotoHomePage"
          >
            好的呢
          </v-btn>
          <v-btn
            color="green darken-1"
            text
            @click="gotoVipPage"
          >
            成为 VIP
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="authCodeDialog"
      max-width="290"
    >
      <v-form
        ref="form"
        lazy-validation
      >
        <v-text-field
          v-model="authCode"
          label="验证码"
          required
        />
        <v-btn
          color="success"
          class="mr-4"
          @click="submitAuthCode"
        >
          提交
        </v-btn>
        <v-btn
          color="error"
          class="mr-4"
          @click="cancelSubmitAuthCode"
        >
          取消
        </v-btn>
      </v-form>
    </v-dialog>
  </div>
</template>

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

const hls = require('hls.js')
const dashjs = require('dashjs')
const flv = require('flv.js')
const DPlayer = require('dplayer')

export default {
  name: 'Play',
  props: {
    videoProp: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      hls,
      dashjs,
      flv,
      DPlayer,
      userPermission: {
        userId: -1,
        vip: false
      },
      userId: -1,
      playRecord: null,
      getUrl: false,
      permissionDialog: false,
      authCodeDialog: false,
      authCode: null
    }
  },
  created() {
    const userInfo = this.$store.state.user.userInfo
    if (userInfo !== null) {
      this.userPermission.userId = userInfo.userId
      this.userPermission.vip = userInfo.vip
    }

    const vidScope = this.videoProp.scope
    if (vidScope === 1) {
      this.getUrl = true
    } else if (vidScope === 2) {
      if (this.userPermission.vip) {
        this.getUrl = true
      } else {
        this.permissionDialog = true
      }
    } else if (vidScope === 3) {
      this.authCodeDialog = true
    } else if (vidScope === 4) {
      alert('私有视频, 只有本人可以观看')
    }
  },
  mounted() {
    // SocketInstance.connect()
    const videoId = this.videoProp.videoId
    if (this.getUrl) {
      this.getVideoUrl(videoId)
      /*      videoUrl(videoId)
        .then(res => {
          if (res.code === 0) {
            const urlType = res.data.type
            if (urlType === 'mp4') {
              const urls = res.data.urls
              for (const url of urls) {
                url.type = 'normal'
              }
              this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls)
            } else if (urlType === 'flv') {
              // this.initFlvPlayer(videoId, coverUrl, urls)
            } else {
              alert('url 类型无法识别')
            }
          } else {
            console.error(res.msg)
          }
        }).catch(error => {
          console.error(error.message)
        })*/
    }
  },
  methods: {
    getVideoUrl(videoId) {
      videoUrl(videoId)
        .then(res => {
          if (res.code === 0) {
            const urlType = res.data.type
            if (urlType === 'mp4') {
              const urls = res.data.urls
              for (const url of urls) {
                url.type = 'normal'
              }
              this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls)
            } else if (urlType === 'flv') {
              // this.initFlvPlayer(videoId, coverUrl, urls)
            } else {
              alert('url 类型无法识别')
            }
          } else {
            console.error(res.msg)
          }
        }).catch(error => {
          console.error(error.message)
        })
    },
    // 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, urls) {
      new DPlayer({
        container: document.querySelector('#dplayer'),
        lang: 'zh-cn',
        logo: '/logo.png',
        autoplay: false,
        screenshot: false,
        video: {
          pic: coverUrl,
          defaultQuality: 0,
          quality: urls
          // url: videoUrl
          // type: 'auto',
        },
        danmaku: {
          id: videoId,
          maximum: 10000,
          api: '//api.reghao.cn/api/comment/danmaku/',
          token: 'bili',
          user: userId,
          bottom: '15%',
          unlimited: true
        }
      })

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

      // 跳转到指定秒
      // dp.seek(100)
      player.on('play', function() {
        console.log('mp4Player 开始播放事件' + this.userPermission.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++
      })*/
    },
    initFlvPlayer(videoId, coverUrl, videoUrl) {
      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
            }
          }
        }
      })
    },
    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',
        danmaku: {
          id: videoId,
          maximum: 10000,
          api: '//api.reghao.cn/api/media/danmaku/',
          token: 'bili',
          user: this.userPermission.userId,
          videoId: videoId,
          bottom: '15%',
          unlimited: true
        }
      })
    },
    initDashPlayer(videoId, coverUrl, videoUrl) {
      new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
          url: videoUrl,
          type: 'dash'
        }
      })
    },
    gotoHomePage() {
      this.permissionDialog = false
      if (this.$route.path === '/') {
        return
      }
      this.$router.push('/')
    },
    gotoVipPage() {
      this.permissionDialog = false
      if (this.$route.path === '/vip/plan') {
        return
      }
      this.$router.push('/vip/plan')
    },
    submitAuthCode() {
      this.authCodeDialog = false
      console.log('发送视频认证码')
      console.log(this.videoProp.videoId)
      console.log(this.authCode)

      this.getVideoUrl(this.videoProp.videoId)
    },
    cancelSubmitAuthCode() {
      this.authCodeDialog = false
      if (this.$route.path === '/') {
        return
      }
      this.$router.push('/')
    }
  }
}
</script>

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