西瓜播放器xgplayer在乾坤子应用中使用截图时window报

出现报错的原因是xgplayer截图时要用到window对象，而在乾坤子应用中找不到window，因此会报错

解决思路

使用xgplayer提供的自定义插件，和原始截图功能代码（规避掉window）结合，开发一个截图功能。
功能开发前置能力

• xgplayer的自定义插件开发例子
• xgplayer的截图screenShot功能代码查看

自定义截图插件代码参考

import { Plugin } from 'xgplayer'
const { POSITIONS } = Plugin

export default class demoPlugin extends Plugin {
  // 插件的名称，将作为插件实例的唯一key值
  static get pluginName() {
    return 'shootImg'
  }

  static get defaultConfig () {
      return {
        // 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
        position: POSITIONS.CONTROLS_RIGHT,
        index: 7
      }
  }

  constructor (args) {
    super(args)
  }

  beforePlayerInit () {
   // TODO 播放器调用start初始化播放源之前的逻辑
  }

  afterPlayerInit () {
    // TODO 播放器调用start初始化播放源之后的逻辑
  }

  afterCreate () {
    const { player } = this
    const screenShotOptions = { ...player.config.screenShot, fileName: '视频截图' }
    let callBack = null
    player.video.setAttribute('crossOrigin', 'anonymous')
    let encoderOptions = 0.92
    if (screenShotOptions.quality || screenShotOptions.quality === 0) {
      encoderOptions = screenShotOptions.quality
    }
    const type = screenShotOptions.type === undefined ? 'image/png' : screenShotOptions.type
    const format = screenShotOptions.format === undefined ? '.png' : screenShotOptions.format
    const canvas = document.createElement('canvas')
    const canvasCtx = canvas.getContext('2d')
    const img = new Image()
    canvas.width = this.config.width || 600
    canvas.height = this.config.height || 337.5
    const saveScreenShot = function (data, filename) {
      const saveLink = document.createElement('a')
      saveLink.href = data
      saveLink.download = filename
      const event = document.createEvent('MouseEvents')
      /************Document.defaultView替换window******************/
      event.initMouseEvent('click', true, false, Document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      saveLink.dispatchEvent(event)
    }
    player.screenShot = function (save = true) {
      save = screenShotOptions.saveImg === undefined ? save : screenShotOptions.saveImg
      canvas.width = player.video.videoWidth || 600
      canvas.height = player.video.videoHeight || 337.5
      callBack = screenShotOptions.callBack
      img.onload = (function () {
        canvasCtx.drawImage(player.video, 0, 0, canvas.width, canvas.height)
        img.src = canvas.toDataURL(type, encoderOptions).replace(type, 'image/octet-stream')
        const screenShotImg = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream')
        const saveFileName = screenShotOptions.fileName || player.lang.SCREENSHOT
        player.emit('screenShot', screenShotImg)
        if (save && callBack) {
          callBack(screenShotImg, saveFileName, format)
        } else {
          save && saveScreenShot(screenShotImg, saveFileName + format)
        }
      })()
    }

    this.onClick = () => {
      console.log('当前插件根节点点击事件')
      console.log('this.player', this.player)
      player.screenShot()
    }

    // 对当前插件根节点绑定click事件
    this.bind('click', this.onClick)
    // TODO 插件实例化之后的一些逻辑
  }

  destroy () {
    this.unbind('click', this.onClick)
    // 播放器销毁的时候一些逻辑
  }

  render () {
    return `<div class="xg-options-icon show player-shoot-img-plugin">
              <div class="xgplayer-icon btn-text">
                <span class="icon-text">截图</span>
              </div>
            </div>`
  }
}