通过Canvas获得视频某一帧

        原生js的video标签并没有直接获得某一个时间视频内容的功能，但我们可以结合画布canvas来提取视频内容。这样也能用于获得视频封面等等功能

        

<template>
  <div>
    <!-- 视频文件上传输入框 -->
    <video ref="videoEle" src="视频链接" @canplay="getVideoThumbnail" :style="{'display':'none'}"></video>
 
    <!-- 显示视频封面 -->
    <img v-if="thumbnailUrl" :src="thumbnailUrl" alt="Video Thumbnail" class="video-cover-img" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const thumbnailUrl = ref(null);
const videoEle = ref(null)
const getVideoThumbnail = () => {
   // 获取视频元素
   const video = videoEle.value
 
   // 设置到视频的1秒时获取封面图
   video.currentTime = 0.1; 
 
   // 创造画布元素 获取2d
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
 
   // 设置画布和视频的宽高英语
   canvas.width = video.videoWidth
   canvas.height = video.videoHeight
 
   // 绘制视频的当前帧
   context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 
 
   // 获取图片的base64编码
   const thumbnail = canvas.toDataURL('image/png'); // 获取图片的base64编码
 
   // 赋值给字符变量
   thumbnailUrl.value = thumbnail
};
</script>
 
<style scoped>
.video-cover-img {
  width: 300rem;
  height: auto;
}
</style>