通过Canvas得到视频某一帧

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

1. <template>
2.   <div>
3.     <!-- 视频文件上传输入框 -->
4.     <video ref="videoEle" src="视频链接" @canplay="getVideoThumbnail" :style="{'display':'none'}"></video>
6.     <!-- 显示视频封面 -->
7.     <img v-if="thumbnailUrl" :src="thumbnailUrl" alt="Video Thumbnail" class="video-cover-img" />
8.   </div>
9. </template>
11. <script setup>
12. import { ref } from 'vue';
14. const thumbnailUrl = ref(null);
15. const videoEle = ref(null)
16. const getVideoThumbnail = () => {
17.    // 获取视频元素
18.    const video = videoEle.value
20.    // 设置到视频的1秒时获取封面图
21.    video.currentTime = 0.1;
23.    // 创造画布元素 获取2d
24.    const canvas = document.createElement('canvas');
25.    const context = canvas.getContext('2d');
27.    // 设置画布和视频的宽高英语
28.    canvas.width = video.videoWidth
29.    canvas.height = video.videoHeight
31.    // 绘制视频的当前帧
32.    context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
34.    // 获取图片的base64编码
35.    const thumbnail = canvas.toDataURL('image/png'); // 获取图片的base64编码
37.    // 赋值给字符变量
38.    thumbnailUrl.value = thumbnail
39. };
40. </script>
42. <style scoped>
43. .video-cover-img {
44.   width: 300rem;
45.   height: auto;
46. }
47. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。