<template>
  <div style="width: 100%;height: 100%;position: relative">
    <video
      v-if="videoSrc"
      id="video"
      :src="videoSrc"
      style="position: relative;z-index: 10;width: 100%;height:calc(100% - 50px)"
      controls
      crossorigin="anonymous"
    />
    <div style="text-align: right">
      <el-button size="small" type="primary" @click="jietu">截图</el-button>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    videoSrc: {
      type: String,
      default() {
        return ''
      }
    },
    fileName: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      isDisabled: false,
      imgList: [],
      fileObj: null,
      videoList: [],
      file: null,
      dataBuffer: null,
      percentage: 0,
      isVideoToMp4: false,
      isNeedToMp4: false
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    jietu() {
      this.screenShot('video')
    },
    screenShot(id) {
      var player = document.getElementById(id)
      console.log(player)
      var canvas = document.createElement('canvas')
      var img = document.createElement('img')
      canvas.width = player.videoWidth
      canvas.height = player.videoHeight
      canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height)
      var dataURL = canvas.toDataURL('image/png')
      img.src = dataURL
      img.width = player.clientWidth
      img.height = player.clientHeight
      img.style.objectFit = 'contain'
      console.log(dataURL)
      this.downFile(dataURL, `截图${new Date().getTime()}.png`)
    },
    downFile(data, fileName) {
      var save_link = document.createElementNS(
        'http://www.w3.org/1999/xhtml',
        'a'
      )
      save_link.href = data
      save_link.download = fileName
      var event = document.createEvent('MouseEvents')
      event.initMouseEvent(
        'click',
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      )
      save_link.dispatchEvent(event)
    }
  }
}
</script>

<style scoped>

</style>
