html 标签本身不生成预览图，仅负责播放；真正的内容摘要预览图需前端截帧或后端智能分析关键帧，再通过 poster 属性或动态 展示。
要实现真正有意义的“内容摘要预览图”（比如从视频中自动选取最具代表性的一帧，而非简单用第一帧），需分两步：先获取视频帧，再智能选图。纯前端有局限，推荐结合服务端能力。
1. 基础封面图：用 `poster` 属性显示首帧或指定图
这是最轻量、浏览器原生支持的方式，但不是“内容摘要”，只是占位图：
- 设置 `
- 若未设 `poster`，多数浏览器默认显示视频第一帧（取决于编码和浏览器行为，不可靠）
- 适合封面图已知的场景（如上传时已生成），不适用于动态摘要
2. 前端截帧：用 Canvas 提取任意时间点画面
可在用户交互（如 hover、点击）时实时抓取当前播放帧，适合做“鼠标悬停预览”：
- 监听 `loadeddata` 确保视频元数据就绪
- 用 `video.currentTime = t` 跳转到目标时间（如 2s、5s、中点）
- 用 `canvas.getContext('2d').drawImage(video, 0, 0)` 绘制当前帧
- 调用 `canvas.toDataURL('image/jpeg')` 获取 base64 图片
- 注意：跨域视频需 `video.crossOrigin = 'anonymous'`，否则 canvas 会污染
3. 智能摘要图：依赖后端分析生成关键帧
真正体现“内容摘要”的预览图，需分析视频语义（如镜头切换、运动变化、人脸出现等），前端无法可靠完成：
- 上传视频后，服务端用 FFmpeg 抽帧（如每秒1帧）+ Python（OpenCV/ffmpeg-python）做帧差异检测或关键帧提取
- 可结合轻量模型（如 CLIP 图文匹配）选与标题/标签最相关的帧
- 返回最优帧 URL 给前端，用于 `poster` 或预览面板
- 示例命令：
ffmpeg -i input.mp4 -vf "select='gt(scene\,0.4)',scale=320:180" -vsync vfr preview_%03d.jpg
4. 用户交互式预览：进度条悬停显示缩略图
常见于 YouTube 类体验，需预生成多张缩略图并按时间索引：
- 服务端将视频切分为若干时间段（如每 1 秒一组），批量抽帧生成缩略图集
- 前端监听进度条 `mousemove`，计算 hover 时间点 → 匹配对应缩略图 URL
- 用 `
` 动态显示，避免 canvas 实时绘制性能损耗
- 缩略图文件名建议含时间戳（如
thumb_00:12:34.jpg），便于精准映射
不复杂但容易忽略：纯前端方案受限于性能、精度和跨域；真实业务中，“内容摘要预览图”的核心在服务端预处理，HTML `
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
