Vue3 视频播放与截图功能实现

视频播放

使用 HTML5 的

video 标签基本属性

视频截图功能实现

思路

1. 视频帧捕获：首先，通过

2. Canvas 绘制转换：创建一个与视频尺寸相同的 Canvas 画布，使用 Canvas 2D 上下文（Condext2D）的 drawImage() 方法将视频帧绘制到画布上。

3. Base64 编码输出：调用 Canvas 的 toDataUrl() 方法，将绘制好的图像数据转换为 Base64 编码的图片URL 。该方法支持指定输出格式（如 PNG/JPEG）和质量参数，转换后的数据可以直接用作图片源或下载保存。

代码实现