明白了，阿杰！你想用 Canvas 对 HTML5 <video> 的当前帧进行截图。我帮你整理一个完整的 示例代码，特点：

  • 可选择视频播放某一时刻截图
  • 支持下载截图
  • 支持显示在页面上
&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
&lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>视频截图示例&lt;/title>
&lt;style>
  body { font-family: Arial, sans-serif; padding:20px; }
  video { width: 100%; max-width: 600px; display:block; margin-bottom:10px; }
  canvas { border:1px solid #ccc; display:block; margin-top:10px; }
  button { padding:6px 12px; margin-top:10px; }
&lt;/style>
&lt;/head>
&lt;body>

&lt;h2>Canvas 视频截图示例&lt;/h2>

&lt;video id="video" controls>
  &lt;source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
&lt;/video>

&lt;button id="captureBtn">截图当前帧&lt;/button>
&lt;canvas id="canvas">&lt;/canvas>
&lt;a id="downloadLink" style="display:block; margin-top:10px;">下载截图&lt;/a>

&lt;script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const captureBtn = document.getElementById('captureBtn');
const downloadLink = document.getElementById('downloadLink');

captureBtn.addEventListener('click', ()=>{
  // 设置 canvas 尺寸为视频尺寸
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // 将当前视频帧绘制到 canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 设置下载链接
  downloadLink.href = canvas.toDataURL('image/png');
  downloadLink.download = `screenshot_${Date.now()}.png`;
  downloadLink.textContent = '点击下载截图';
});
&lt;/script>

&lt;/body>
&lt;/html>

🔹 功能说明

  1. 截图当前帧
    • ctx.drawImage(video, 0, 0, width, height)
    • 可以精确截取视频播放的任意一帧
  2. 保存图片
    • canvas.toDataURL('image/png') 生成 Base64 图片
    • 可赋值给 <a> 标签下载
  3. 自适应视频尺寸
    • canvas.width = video.videoWidth
    • canvas.height = video.videoHeight

🔹 拓展思路

  • 可以增加 截图定时器，自动每隔几秒截图
  • 可以结合 File API / WebSocket 上传截图
  • 可以在截图上绘制 水印或标注