Vue实现视频截图

Vue实现视频截图的方法

使用Canvas和Video元素

通过HTML5的<video>和<canvas>元素结合Vue实现视频截图功能。需要在模板中放置<video>和<canvas>元素，并通过Vue方法控制截图逻辑。

<template>
  <div>
    <video ref="videoPlayer" controls @loadedmetadata="onVideoLoaded"></video>
    <canvas ref="canvas"></canvas>
    <button @click="capture">截图</button>
  </div>
</template>

<script>
export default {
  methods: {
    onVideoLoaded() {
      const video = this.$refs.videoPlayer;
      const canvas = this.$refs.canvas;
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    },
    capture() {
      const video = this.$refs.videoPlayer;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageData = canvas.toDataURL('image/png');
      this.downloadImage(imageData);
    },
    downloadImage(dataUrl) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = 'screenshot.png';
      link.click();
    }
  }
};
</script>

使用第三方库

对于更复杂的需求，可以使用第三方库如vue-video-player或video.js结合截图插件。安装vue-video-player后，可以更方便地控制视频播放和截图。

npm install vue-video-player

<template>
  <div>
    <video-player ref="player" :options="playerOptions"></video-player>
    <button @click="capture">截图</button>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
export default {
  components: { videoPlayer },
  data() {
    return {
      playerOptions: {
        sources: [{ src: 'video.mp4', type: 'video/mp4' }]
      }
    };
  },
  methods: {
    capture() {
      const player = this.$refs.player.player;
      const canvas = document.createElement('canvas');
      canvas.width = player.videoWidth();
      canvas.height = player.videoHeight();
      const ctx = canvas.getContext('2d');
      ctx.drawImage(player.el().querySelector('video'), 0, 0, canvas.width, canvas.height);
      const imageData = canvas.toDataURL('image/png');
      this.downloadImage(imageData);
    },
    downloadImage(dataUrl) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = 'screenshot.png';
      link.click();
    }
  }
};
</script>

注意事项

确保视频已加载元数据（loadedmetadata事件触发后再截图），否则可能无法正确获取视频尺寸。截图时需处理跨域问题，若视频源跨域需设置crossOrigin属性。

<video ref="videoPlayer" crossorigin="anonymous"></video>

对于动态视频源，需在视频源变更后重新设置canvas尺寸。截图后的图片可以通过toDataURL转换为Base64或直接下载。