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