video标签需设preload="metadata"以避免首帧卡顿，仅加载元数据；autoplay必须配muted；source须≥2个且含webm与mp4并带type属性；监听事件需在dom解析阶段绑定。
video 标签没加 preload="metadata" 会导致首帧卡顿
浏览器默认对 <video></video> 执行 preload="auto"，尤其在移动网络下会触发整段视频下载，拖慢首屏渲染、浪费带宽。真实场景中常表现为：页面加载完成但视频区域长时间黑屏或显示 loading 图标。
- 强制设为
preload="metadata"：只拉取时长、宽高、封面等元数据，足够渲染控件和poster - 明确禁用自动播放音轨：即使写了
autoplay，也必须同步加muted，否则 Chrome/Safari 会直接拒绝加载音频轨道，导致canplay事件不触发 - 避免在 DOM ready 前动态插入
<video></video>：JS 注入的 video 元素若未设preload，部分 iOS WebView 会回退到auto行为
多个 source 格式缺失或顺序错乱引发兼容性失败
仅提供 .mp4 会导致 Firefox / Safari 某些版本解码失败；仅提供 .webm 则 Edge 旧版、iOS Safari 直接静默 fallback 到 poster。错误现象是：控制栏出现但点击播放无响应，控制台无报错，network 面板可见某 <source></source> 返回 404 或 MIME type mismatch。
- 优先顺序按浏览器支持度排列：
webm（VP9/Opus）→mp4（H.264/AAC），且都需明确type属性，例如type="video/webm; codecs="vp9, opus"" - 所有
<source></source>必须放在<video></video>开始标签后、<track></track>或内联内容前，顺序错位会导致部分浏览器忽略后续 source - 不要依赖服务器自动推断 MIME 类型：Nginx/Apache 必须显式配置
.webm对应video/webm，否则即使路径正确也会被当成text/plain拒绝加载
异步加载脚本干扰 video 生命周期事件监听
把初始化 video 的 JS 放在 <script async></script> 或模块化打包后延迟执行，容易错过 loadedmetadata、canplay 等关键事件——因为这些事件在 DOM 解析阶段就可能触发，而 async 脚本尚未加载完毕。
- 监听逻辑必须在
<video></video>元素之后立即声明，或使用document.addEventListener('DOMContentLoaded', ...)包裹，不能依赖window.onload - 避免在
async脚本里调用video.load()：该方法会重置加载状态，已缓存的 metadata 可能被丢弃，造成重复请求 - 若用框架（如 React/Vue），确保 ref 绑定完成后再 attach 事件，否则
video实例为空，addEventListener无效
自动化核定中容易漏掉的硬性检查项
多数 Linter（如 HTMLHint、axe-core）默认不校验 <video></video> 的属性组合是否满足现代播放策略，靠人工 review 极易遗漏。
- 必须校验：是否存在
preload且值不为auto；是否存在autoplay但缺失muted - 必须校验：
<source></source>数量 ≥ 2 且至少含一个webm和一个mp4；每个<source></source>是否含合法type属性 - 必须校验：
<video></video>是否包裹在语义化容器内（如<section></section>或<article></article>），而非裸露在直接子级——这影响可访问性树构建和焦点管理
真正的难点不在写对单个 video，而在批量嵌入时保持属性组合的一致性。自动化工具若只查标签存在与否，不验证属性间逻辑约束，就会放行看似合法实则运行时失效的代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
