ps-tcplayer/src/tccomponents/SnapshotComponent/index.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

import snapshotHtml from './index.html'
import './index.scss'
import { parseDom } from '../../utils'

/**
 * 视频截图组件
 */
export default class SnapshotComponent {
  /**
   * @constructor 视频截图组件构造函数
   */
  constructor(player) {
    this.player = player
    this.html = parseDom(snapshotHtml)
  }

  createEl(el) {
    const controlBar = el.querySelector('.vjs-control-bar')
    const tcpVideoQualitySwitcher = controlBar.querySelector('.tcp-video-quality-switcher')
    controlBar.insertBefore(this.html, tcpVideoQualitySwitcher.nextSibling)
  }

  ready() {
    
    // 添加点击事件监听器
    this.html.addEventListener('click', () => {
      this.captureSnapshot()
    })
  }

  /**
   * 捕获当前视频帧并下载
   */
  captureSnapshot() {
    const player = this.player
    const video = player.tech_.el_
    
    if (!video) {
      console.error('视频元素不存在')
      return
    }

    const canvas = document.createElement('canvas')
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
    
    const ctx = canvas.getContext('2d')
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
    
    try {
      const imageData = canvas.toDataURL('image/png')
      
      const link = document.createElement('a')
      link.href = imageData
      
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
      const title = player.el_.getAttribute('title') || 'video'
      const filename = `${title}_${timestamp}.png`
      
      link.download = filename
      
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      
    } catch (error) {
      console.error('截图失败:', error)
    }
  }
}