获取视频封面

实现方式

通过 video 元素+canvas 元素的方式实现

• 生成 video 和 canvas 元素
• 当 video 元素资源加载完成时，将 video 元素绘制到 canvas 画布上，然后通过 toBlob 或则 toDataURL 获取到对应的封面图片资源

注意事项

video 视频资源为同域或支持跨域

视频链接跨域时有两种解决办法：

• video 元素添加跨域属性，在 video 元素上设置跨域标识。服务器 CORS 配置支持跨域的对应请求头

let videoRef = document.createElement("video");
videoRef.crossOrigin = "anonymous"; // 关键设置

// 确保视频服务器返回以下响应头
    
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

• 视频资源上传同域服务器，避免跨域

代码实现

<template>
  <div ref="app">
  </div>
</template>

<script lang="ts" setup>

import {ref, onMounted} from "vue";
const app = ref()
const initCanvas = async()=> {
  let videoRef = document.createElement("video");
  let videoWidth: number
  let videoHeight:number
  const canvasRef = document.createElement("canvas");
  // 视频资源链接，需要保证该资源支持跨域
  videoRef.src = "*******"
  // app.value.appendChild(videoRef);
  videoRef.muted = true
  videoRef.controls = true;
  videoRef.preload = 'auto';
  
  videoRef.addEventListener("loadeddata", () => {
    videoWidth = videoRef.videoWidth
    videoHeight = videoRef.videoHeight
    // app.value.appendChild(canvasRef);
    canvasRef.width = videoWidth;
    canvasRef.height = videoHeight;
    const ctx = canvasRef.getContext('2d')
    ctx?.drawImage(videoRef, 0, 0, canvasRef.width, canvasRef.height);
    // 生成封面图片链接
    const coverUrl = canvasRef.toDataURL("image/png");
  })
}

onMounted(() => {
  initCanvas();
})
</script>

• 为了避免loadeddata 事件触发时，视频资源可能并没加载完全，导致 canvas 绘制失败，也可以通过requestAnimationFrame轮询检测视频就绪状态

<template>
  <div ref="app">
  </div>
</template>

<script lang="ts" setup>

import {ref, onMounted} from "vue";
const app = ref()
const initCanvas = async()=> {
  let videoRef = document.createElement("video");
  let videoWidth: number
  let videoHeight:number
  const canvasRef = document.createElement("canvas");
  // 视频资源链接，需要保证该资源支持跨域
  videoRef.src = "*****"
  app.value.appendChild(videoRef);
  videoRef.muted = true
  videoRef.controls = true;
  videoRef.preload = 'auto';
  videoRef.addEventListener("loadedmetadata", () => {
    videoWidth = videoRef.videoWidth
    videoHeight = videoRef.videoHeight
    app.value.appendChild(canvasRef);
    canvasRef.width = videoWidth;
    canvasRef.height = videoHeight;
    const ctx = canvasRef.getContext('2d')

    const drawFrame = () => {
      if(videoRef.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
        ctx?.drawImage(videoRef, 0, 0, canvasRef.width, canvasRef.height);
        // 生成封面图片链接
        const coverUrl = canvasRef.toDataURL("image/png");
      }else {
        requestAnimationFrame(drawFrame)
      }
    }
    drawFrame()
  })
}

onMounted(() => {
  initCanvas();
})
</script>