必须为每个video标签显式设置preload="metadata"，否则默认preload="auto"会导致弱网下整段视频下载、首帧黑屏或loading图标卡住；autoplay必须配muted，否则canplay事件不触发；source须≥2个且含webm与mp4并带type属性；动态插入video需在DOM插入后立即绑定事件。
preload="metadata" 必须出现在每个 <video> 标签中，否则首帧卡顿、黑屏、控制栏无响应等问题几乎必然发生——这不是“可能优化”，而是现代浏览器播放策略的硬性前提。
video preload 属性漏设导致首帧黑屏
真实场景里，<video> 没写 preload="metadata"，浏览器默认走 preload="auto"。尤其在 3G/弱网下，它会立刻开始下载整段视频文件，阻塞 DOM 渲染、拖慢首屏时间，用户看到的就是长时间黑屏或 loading 图标转个不停。
- 检查点：打开 DevTools → Elements 面板，逐个确认
<video>是否显式声明preload="metadata" - 注意：
preload="none"不是替代方案——它会让poster都不加载，且首次点击播放前无元数据，控件宽度/时长都为空 - iOS Safari 和部分 Android WebView 对未设
preload的<video>会直接回退到auto行为，哪怕你 JS 后续补设也无效
autoplay 必须配 muted，否则 canplay 事件永不触发
Chrome 和 Safari 已强制要求：带音轨的自动播放必须静音。如果只写 autoplay 却没加 muted，浏览器会拒绝加载音频轨道，整个媒体加载流程卡在 loadedmetadata 之后、canplay 之前——控制台无报错，network 面板能看到视频请求成功，但播放按钮就是点不动。
- 正确写法：
<video autoplay muted preload="metadata"> - 错误写法：
<video autoplay preload="metadata">（即使服务器返回的是无声视频，也可能因 MIME 或编码信息被识别为“潜在有声”而被拦截） - 服务端不能替你兜底：FFmpeg 生成的 MP4 若未清除 audio track 的 metadata，仍会被视为“可发声”，必须靠前端
muted显式声明
source 格式与 type 属性缺失引发静默失败
只提供一个 .mp4，Firefox 可能解码失败；只给 .webm，iOS Safari 直接 fallback 到 poster 并不报错。现象是：控件显示正常、点击播放没反应、network 面板里某个 <source> 返回 404 或 MIME type mismatch。
-
<source>必须 ≥2 个，且至少含type="video/webm; codecs="vp9, opus""和type="video/mp4; codecs="avc1.640028, mp4a.40.2"" - 顺序很重要：把
webm放前面，mp4放后面——浏览器按顺序试加载，VP9 解码更快更省带宽 - 服务器必须显式配置 MIME 类型：
.webm → video/webm，不能依赖 auto-detect；Nginx 配置示例：types { video/webm webm; }
DOM ready 前动态插入 video 容易丢失事件监听
用 JS 动态创建 <video> 并 append 到页面，若没设 preload，部分 iOS WebView 会忽略该属性，回退到默认 auto；更麻烦的是，loadedmetadata 等事件可能在脚本执行前就已触发，监听器挂不上，后续调用 play() 就报 “Promise rejected: The element has no supported sources.”
立即学习“前端免费学习笔记（深入）”；
- 安全做法：所有
<video>写死在 HTML 模板里，不要 JS 动态生成 - 非得动态插入？必须同步设置
preload="metadata"，并在元素插入 DOM 后立即绑定事件，不能等DOMContentLoaded—— 因为事件可能已在解析阶段触发 - 框架场景（React/Vue）：确保 ref 已挂载、
videoEl不为空，再调用addEventListener；避免在useEffect(() => {}, [])里延迟监听
preload，CI 流水线又没跑 HTMLHint 的 attr-required 规则，上线后问题就藏在用户网络波动的瞬间——看不见报错，只看见黑屏。 
