preload="metadata"不直接提速首帧，其效果依赖服务端支持Accept-Ranges、moov在文件开头、浏览器边下边播能力；常见卡黑屏因moov在末尾、缺少字节范围支持、未设poster或iOS忽略preload。
preload="metadata" 本身不直接提速首帧，它只保证“元数据秒到”，但首帧真正快不快，取决于服务端是否配合、moov 是否在文件开头、以及浏览器能否边下边播。
为什么设了 metadata 还卡在黑屏？
常见错误现象：点击播放后仍要等 1–2 秒才出第一帧，loadedmetadata 事件早触发了，但 canplay 或 canplaythrough 拖很久。
- 服务端没返回
Accept-Ranges: bytes响应头 → 浏览器无法发起字节范围请求，只能硬下完整头部（可能几 MB），metadata模式退化为“伪 metadata” - MP4 文件的
moovbox 在末尾（FFmpeg 默认行为）→ 即使只想要时长和宽高，也得下载大半文件才能读到，preload="metadata"彻底失效 - 没配
poster→ 用户看不到占位图，误以为卡死；实际是首帧还在加载，但视觉上无反馈 - 移动端 iOS Safari 忽略所有
preload值 → 它永远按需加载，metadata设置只是摆设，必须靠playsinline+ 显式load()补救
FFmpeg 转码必须加 -movflags +faststart
这是最常被跳过的一步。不加这个参数，moov 就在文件末尾，preload="metadata" 失效不是前端问题，是文件本身结构缺陷。
正确命令示例：
立即学习“前端免费学习笔记（深入）”；
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4
-
-c copy表示不重编码，纯搬运，快且保质 -
+faststart把moov搬到开头，让浏览器 100–300ms 内拿到元数据 - 如果已上线视频没加 faststart，CDN 缓存可能长期不更新 → 需强制刷新缓存或改文件名再发布
配合 poster 和 playsinline 才算完整链路
只设 preload="metadata" 不够，用户点击前必须有视觉锚点，点击后必须避免全屏打断流式体验。
-
poster必须存在且尺寸匹配（推荐 720p 缩略图， - 移动端 iOS Safari / 微信 X5 内核必须加
playsinline和webkit-playsinline，否则点击后强跳全屏，首帧渲染管线中断 300–600ms - 若用 JS 控制播放（比如按钮触发），别直接
video.play()—— 先确保readyState >= 2，否则 iOS 会静默拒绝 - 微信 X5 对首次
load()有丢弃风险，稳妥写法：setTimeout(() => video.load(), 0)
CDN 和服务器配置比 HTML 属性更关键
HTML 里写对 preload="metadata" 只完成了 20%，剩下 80% 在服务端。
- 确认 CDN 返回响应头含
Accept-Ranges: bytes，否则所有 range 请求失败，浏览器 fallback 成整包下载 - 检查 MP4 的
moov位置：用ffprobe -v quiet -show_entries format=duration input.mp4测试是否秒出时长；若超 500ms，基本可判定moov不在开头 - iOS Safari 无视
preload是事实，别试图 hack，专注优化poster+playsinline+load()时机即可
最容易被忽略的是：你改了 HTML 的 preload，但视频文件没重传、CDN 没刷新、服务端没开字节范围支持——这三处任何一处漏掉，metadata 就只是个安慰剂。
