文章地址 (opens new window)

mounted () {
    //动态设置视频高度
    this.offsetHeight = this.$refs.video_box.offsetHeight
    this.screenHeight = document.body.clientHeight
    window.Hls = require('hls.js')
    window.onresize = () => {
      return (() => {
        this.screenHeight = document.body.clientHeight
      })()
    }

    // 禁用dplayer右键属性
    document.querySelector('#dplayer').oncontextmenu = () => {
      document.querySelector('.dplayer-menu').style.display = 'none'
      document.querySelector('.dplayer-mask').style.display = 'none'
      return false
    }
},
methods：{
    // dplayer的flv播放设置
    videoFun (urls, types = 0) {
      const DPlayer = require('dplayer')
      this.playShow = true
      this.dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        danmaku: false, // 弹幕
        autoplay: true,
        screenshot: true, // 截图
        theme: '#FADFA3',
        loop: false,
        lang: 'zh-cn',
        preload: 'auto',
        volume: 0.7,
        video: {
          pic: '',
          type: 'custom',
          //重点配置，官网不一定生效
          customType: {
            custom: (video, player) => {
              const flv = require('flv.js')
              this.flvPlayer = flv.default.createPlayer({
                type: 'flv',
                url: urls
              })
              this.flvPlayer.attachMediaElement(video)
              this.flvPlayer.load()
            }
          }
        }
      })
      // 判断是否开启直播
      this.dp.on('play', () => {
        if (types !== 0) {
          this.dp.pause()
        }
        // this.dp.fullScreen.request('browser')
      })
      // 加载时提示
      this.dp.on('waiting', () => {
        setTimeout(() => {
          if (this.playShow) {
            this.dp.notice('如长时间无法播放，请切换其他播放源', 6000)
          }
        }, 6000)
      })
      // 视频播放时处理
      this.dp.on('canplay', () => {
        this.playShow = false
      })
      this.dp.on('error', () => {
        console.log('player error')
      })
    }
}