preload不是开关而是建议，ios safari无视auto并静默降级为none；metadata最稳妥，仅加载元数据（如时长、封面），但需服务端支持accept-ranges且视频经faststart优化。
preload 属性不是开关，是建议——浏览器可以、也经常忽略它。设成 auto 不代表视频真会提前加载，设成 none 也不代表一丁点数据都不取。
preload="metadata" 是最靠谱的默认值
它只请求视频容器头部（比如 MP4 的 moov box），用来获取时长、宽高、编码格式和封面图，不下载画面帧。这个行为在桌面 Chrome、Firefox、Safari 和大多数 Android 浏览器上都稳定生效。
- 若服务端未返回
Accept-Ranges: bytes响应头，metadata模式可能退化为下载前几 KB 甚至整个文件才能解析时长 - 务必确保视频文件已用
ffmpeg -c copy -movflags +faststart重写，否则moov在文件末尾，浏览器必须下载全部才能拿到元信息 - 配合
poster属性使用，能立刻显示占位图，避免空白闪烁
iOS Safari 无视 preload="auto" 是铁律
从 iOS 10 开始，Safari 就把所有 preload 值（包括 auto）静默降级为 none，哪怕你写了也等于没写。这不是 bug，是苹果强制的流量与电池策略。
- 即使页面加了
autoplay，iOS 也不会因此触发预加载；反而因为autoplay存在，preload会被直接忽略 - 不要靠
video.readyState判断是否预加载成功：iOS 上它长期卡在0（HAVE_NOTHING），直到用户点击播放才开始动 - 真想提前拿时长？必须监听
loadedmetadata事件，而不是检查preload属性值
比 preload 更有效的三种实操手段
单纯改 HTML 属性收效甚微，真正起作用的是组合动作：
- 用
<link rel="preload" as="video" href="xxx.mp4">主动发起请求（仅同域有效，且不触发解码） - 服务端响应头必须含
Accept-Ranges: bytes，否则浏览器无法做字节范围请求，metadata就失效 - 在用户即将看到视频区域时（如 IntersectionObserver 进入视口），用 JS 显式调用
video.load()，并监听canplay或loadeddata再展示控件
最常被忽略的一点：preload 生效的前提是视频元素在 DOM 加载完成时已存在。动态插入的 <video></video> 即使带 preload="auto"，也不会触发预加载——它压根没进初始 HTML 解析流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
