preload="metadata"是最稳妥的默认值，它仅拉取mp4文件开头的moov box（几百字节），获取时长、宽高、封面等元信息，兼容主流浏览器；但需服务端返回accept-ranges: bytes且视频经ffmpeg -movflags +faststart优化，否则可能退化为全量下载。
preload="metadata" 是唯一值得设的值，其他选项要么无效，要么反效果。
为什么preload="metadata"最靠谱
它只拉视频文件开头的 moov box（元数据块），体积通常几百字节，能立刻拿到时长、宽高、封面帧。桌面 Chrome/Firefox/Safari 和主流 Android 浏览器都稳定支持这个行为。
- 不是“保证加载”，而是“浏览器愿意配合的最小可靠交集”
- 不依赖用户手势，DOMContentLoaded 后就能触发
loadedmetadata事件 - 比
preload="auto"安全——后者在 iOS Safari 上被静默降级为none，在 Chrome 桌面也常被当作metadata执行
设了preload="metadata"却没拿到时长？检查三件事
常见现象是 video.duration 一直为 NaN 或请求卡在几 KB 不动——这不是 HTML 写错了，而是服务端或文件本身不达标：
- 服务端响应头必须含
Accept-Ranges: bytes，否则浏览器无法发起字节范围请求，只能硬下前几 MB 才能读到moov - MP4 文件必须用
ffmpeg -c copy -movflags +faststart重写，确保moov在文件开头；否则浏览器得下载整个文件才能解析元数据 -
<video></video>元素必须在初始 HTML 中存在，动态插入的<video preload="metadata"></video>不会触发预加载
怎么验证preload="metadata"真生效了
别信属性值，看实际网络行为和状态流转：
- 打开 DevTools → Network 面板，过滤
.mp4，确认请求出现在DOMContentLoaded之前，且 size 明显小于 1KB - 监听
loadedmetadata事件，在回调里打印video.readyState—— 应该是1（HAVE_METADATA），不是0 - 避免用
video.readyState >= 2判断，那是canplay的事；metadata阶段buffered.length一定为0
配合 JS 做点实事：别光靠 HTML 属性
preload="metadata" 只是起点，真正控制加载节奏得靠 JS：
- 首屏关键视频：DOM 加载完立即调用
video.load()，防止某些内核（如微信 X5）首次load()被静默丢弃 - 非首屏视频：用
IntersectionObserver监听进入视口，再设video.preload = "metadata"并调用load() - 用户划走后：设
video.src = ""释放已建立的连接（注意这会中断正在进行的请求）
最容易被忽略的是服务端配置和文件结构——preload="metadata" 写得再标准，没有 Accept-Ranges 和 faststart，它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
