用途
该技能针对 HTML 中所有 <video> 元素，检查并修复视频缩略图（poster）缺失的问题。没有 poster 图片时，<video> 元素在首帧加载前会显示为空白黑色矩形，视觉上突兀、无法提供视频内容线索，并且如果未单独指定视频尺寸，还可能引发布局偏移（CLS）。合适的缩略图能让用户一眼了解视频主题、决定是否播放，并提升页面视觉质量，在视频预加载延迟的慢速连接下尤其重要。
主要能力
- 检查每个
<video>元素是否包含非空 URL 的poster属性。 - 验证 poster URL 是否解析为有效图片（无 404）。
- 检查是否设置了
width和height属性或 CSS 尺寸，以防止 poster 加载期间的布局偏移。 - 检查 poster 图片是否真实反映视频内容，而非误导性或不相关的图片。
使用方式
检查步骤：找到所有 <video> 元素，逐一确认：(1) 存在 poster 属性且 URL 非空；(2) URL 能解析为有效图片（无 404）；(3) 已设置 width 和 height 属性或 CSS 尺寸，避免 poster 加载时布局偏移；(4) poster 图片准确代表视频内容（非标题党或无关图片）。
修复步骤：(1) 为每个 <video> 元素添加 poster 属性，例如 <video poster='thumbnail.jpg' controls>；(2) 使用能代表视频内容的图片，通常是视频中的一帧、标题卡或品牌缩略图；(3) 确保 poster 图片与视频宽高比一致（通常为 16:9）；(4) 推荐 poster 尺寸：HD 视频至少 1280×720px，较小嵌入场景 640×360px 可接受；(5) 将 poster 图片托管在 CDN 缓存 URL 上以确保快速加载；(6) 同时在 <video> 元素上设置 width 和 height 以防止 CLS。
代码审查：审查模板、服务端渲染 HTML 以及输出相关标记的共享组件，标记渲染 HTML 违反该规则的具体元素、属性和路由。完整实现细节、代码示例和框架特定指南见 references/rule.md。规则页面：https://frontendchecklist.io/en/rules/html/video-thumbnail
适用场景
适用于前端代码审查、模板与服务端渲染 HTML 检查、共享组件审查等需要确保视频元素具备缩略图的场景。
限制
资料未提供该技能的具体安装命令、支持的框架清单、自动化程度或收费信息。