mp4不能边缓冲边播放是因为moov元数据在文件末尾，需用ffmpeg -i input.mp4 -c copy -movflags +faststart将其移至开头，并确保html5 video标签设preload="auto"且服务端响应头含accept-ranges: bytes。
MP4 文件为什么不能边缓冲边播放？
不是 MP4 本身不支持边播边下，而是它的 moov 元数据位置决定了能否流式播放。如果 moov 在文件末尾（常见于用 FFmpeg 默认参数转码或手机直录的视频），浏览器必须下载完整文件才能开始解码——这时你会看到进度条不动、waiting 状态卡住、甚至触发 stalled 事件。
怎么把 moov 移到开头？用 ffmpeg -movflags +faststart
这是最直接有效的修复方式，本质是重排 MP4 的 atom 结构，把 moov 搬到文件头部：
- 命令：
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4 -
-c copy表示不重新编码，只做封装层移动，速度快、无画质损失 - 别漏掉
+号，写成-movflags faststart会清空其他默认 flag，可能引发兼容问题 - 处理后可用
ffprobe -v quiet -show_entries format=duration input.mp4快速验证是否生效（能秒出结果说明 moov 可读）
HTML5 <video></video> 标签要配哪些属性？
光修文件不够，前端也得配合告诉浏览器“我想流式加载”：
- 必须加
preload="auto"（不是"metadata"，后者只取头信息，无法触发持续缓冲） - 推荐加
controls和width/height，否则某些 iOS 版本会拒绝自动播放策略 - 避免设
autoplay不带muted：Chrome/Safari 会静音拦截，导致看似没反应 - 简单写法：
<video src="video.mp4" preload="auto" controls muted></video>
服务端没配 Accept-Ranges 会怎样？
即使 MP4 修好了、标签写对了，如果服务器返回的响应头里没有 Accept-Ranges: bytes，浏览器就无法发分段请求（Range 请求），只能硬下整文件——这时缓冲条依然不会动，Network 面板里看到的是一个超长的 pending 请求。
立即学习“前端免费学习笔记（深入）”；
- Nginx 默认开启字节范围支持，但如果你用了自定义静态服务（比如 Python 的
http.server或某些 CDN 回源配置），要手动检查 - 用 curl 测：
curl -I http://yoursite.com/video.mp4，看响应头是否含Accept-Ranges: bytes - Cloudflare 免费版默认关闭 Range 请求，需在 Page Rule 里加规则：
Cache Level = Cache Everything+ 开启Origin Cache Control
