html5视频预加载不缩短首屏时间，反而可能拖慢——关键在于按需精准加载：首屏视频用preload="metadata"+显式load()，非首屏用data-src+intersection observer，关键视频用，且必须服务端支持accept-ranges和moov前置。
HTML5 视频预加载策略本身不直接缩短首屏加载时间，反而可能拖慢它——关键在于“不盲目预加载”，而是把视频资源的请求时机、范围和方式，精准匹配首屏真实需求。
preload 属性的真实作用有限
它只是向浏览器发出建议，不是指令。现代浏览器（尤其是 iOS Safari）会忽略 preload="auto"，甚至强制降级为 none；Chrome 桌面版通常只取前 1–2 秒；Firefox 受配置限制。更根本的是：若服务端未返回 Accept-Ranges: bytes 响应头，哪怕设了 metadata，浏览器也得下载整个文件才能读取时长，首帧延迟直接翻倍。
真正影响首屏的是“何时加载”和“加载多少”
- 首屏可见区域内的视频，优先用
preload="metadata"+ 显式load()调用，确保元数据快速就位，同时避免无效字节下载 - 非首屏视频，初始不设
src，改用data-src存地址，配合 Intersection Observer 在进入视口时再赋值并触发加载 - 关键视频（如 banner 主视频）可搭配
<link rel="preload" as="video" href="xxx.mp4">，让浏览器在 HTML 解析早期就发起请求，但需同域且不触发解码
服务端支持比前端设置更重要
没有服务端的字节范围（Range）支持，所有 preload 策略都会退化。检查响应头：curl -I https://yoursite.com/video.mp4，确认含 Accept-Ranges: bytes。Nginx 默认开启 range 模块，但 CDN 若缓存了完整响应、未透传 Range 请求，也会导致失效。MP4 文件还需确保 moov box 在开头，可用 ffmpeg -c copy -movflags +faststart 修复。
替代方案：用 JS 主动控制缓冲起点
当需要更高精度（比如只预载前 5 秒、跳过片头广告、或修复老旧 CDN 的 range 缺陷），应放弃原生 preload，改用 MediaSource Extensions（MSE）。它由 JS 主动 fetch 分片、append 到 SourceBuffer，完全绕过浏览器预加载逻辑，首帧可控性显著提升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
