通过Canvas获得视频某一帧

ops/2024/12/20 20:44:17/

        原生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; // 创造画布元素 获取2dconst canvas = document.createElement('canvas');const context = canvas.getContext('2d');// 设置画布和视频的宽高英语canvas.width = video.videoWidthcanvas.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>


http://www.ppmy.cn/ops/143572.html

相关文章

Secure Socket Layer (SSL) 安全套接字层

原文链接 Secure Socket Layer (SSL) - GeeksforGeeks 结论 SSL&#xff08;安全套接字层&#xff09;是一种重要的互联网安全协议&#xff0c;可加密数据以确保在线通信期间的隐私、身份验证和数据完整性。尽管 TLS&#xff08;传输层安全性&#xff09;已取代了 SSL &#x…

vscode不同的项目使用不同的环境变量或编译环境

转载请标明出处&#xff1a;小帆的帆的博客 假如电脑中安装的两套C编译环境&#xff0c;想要切换编译环境时可以在操作系统的环境变量中调整顺序&#xff0c;然后排在前面的环境就会被使用。 这样做的弊端&#xff1a; 麻烦容易忘&#xff0c;忘了项目不报错就可能就不会发现…

ChatGPT生成测试用例的最佳实践(四)

通常情况下还应该进行测试用例外不评审。将已完成的基于百度关键字搜索业务的功能和安全测试用例集的存放位置告知项目团队成员&#xff0c;需要预留出一定的时间&#xff0c;便于项目组研发、产品人员阅读&#xff0c;以免在项目团队测试用例评审会议上占用过多时间熟悉相关测…

Oracle 中什么情况下 可以使用 EXISTS 替代 IN 提高查询效率

为什么 EXISTS 更高效&#xff1f; EXISTS 提前终止&#xff1a; EXISTS 一旦在子查询中找到第一个匹配项&#xff0c;就会立即返回 TRUE&#xff0c;不再继续扫描子查询中的其他记录。IN 必须扫描整个子查询的结果集&#xff0c;将所有结果与主查询的每一行进行对比。大数据集…

PyTorch 2.0 中设置默认使用 GPU 的方法

PyTorch 2.0 中设置默认使用 GPU 的方法 在 PyTorch 2.0 中&#xff0c;默认情况下仍然是使用 CPU 进行计算&#xff0c;除非明确指定使用 GPU。torch.set_default_device 是 PyTorch 2.0 引入的新功能&#xff0c;用于设置默认设备&#xff0c;使得所有后续张量和模块在没有明…

JavaScript九宫格随机抽奖示例

<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title>九宫格抽奖</title><style>/* 全局样式重置 */* {margin: 0;padding: 0;}/* 抽奖容器样式 */.lottery-container {width: 300px;height: 30…

面试题整理5----进程、线程、协程区别及僵尸进程处理

面试题整理5----进程、线程、协程区别及僵尸进程处理 1. 进程、线程与协程的区别1.1 进程&#xff08;Process&#xff09;1.2 线程&#xff08;Thread&#xff09;1.3 协程&#xff08;Coroutine&#xff09;2. 总结对比 3. 僵尸进程3.1 什么是僵尸进程&#xff1f;3.2 僵尸进…

数据可视化-1. 折线图

目录 1. 折线图适用场景分析 1. 1 时间序列数据展示 1.2 趋势分析 1.3 多变量比较 1.4 数据异常检测 1.5 简洁易读的数据可视化 1.6 特定领域的应用 2. 折线图局限性 3. 折线图代码实现 3.1 Python 源代码 3.2 折线图效果&#xff08;网页显示&#xff09; 1. 折线图…