视频在移动端加载太慢，该怎么优化？

Prog.圣恩提问于 2026-02-25 15:03:19 阅读 12

优化

我做的一个落地页里嵌了个宣传视频，PC端还好，但在手机上打开特别慢，经常转圈半天。已经试过把视频压缩到 10MB 以内了，格式是 MP4，用的是 <video> 标签。

也加了 preload="metadata"，但好像没啥用。是不是还得做格式转换或者用别的加载策略？求指点！

资源优化

我来解答赞 2 收藏

反馈

1 条解答

公孙珊珊 Lv1

你这情况我太熟了，之前也踩过不少坑。preload="metadata" 确实能只加载元数据，但移动端网络波动大，尤其弱网下还是容易卡住。光压到 10MB 不够，关键得按需加载 + 自动适配网络。

先说最有效的做法：用 HLS（m3u8）分段加载。MP4 是单文件，一上来就得下载完整内容，而 HLS 会把视频切成小片段（比如 5~10 秒一个 ts），浏览器边下边播，首屏能快不少。现在主流浏览器（包括 iOS Safari 和 Android Chrome）都支持 HLS 了，不用额外插件。

具体操作：把视频转成 m3u8 格式，用 ffmpeg 就行，命令大概长这样：

ffmpeg -i input.mp4 -profile:v baseline -level 3.0 -s 1280x720 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

然后 HTML 里直接用就行，别写 preload="none"，让它默认懒加载。

另外补充几个实测有效的点：
1. 播放前加个占位图（poster 属性），避免空白页显得更慢
2. 用 playsinline 和 webkit-playsinline 防止 iOS 自动全屏打断流程
3. 如果页面有多个视频，别一次性全加载，用 IntersectionObserver 做“进入视口才加载”

最后说句扎心的：10MB 的视频在 4G 下可能也要好几秒下载，真要追求快，720p 压到 3~5MB 才是合理区间， bitrate 控制在 1500~2500kbps 左右，画质够用又不拖沓。

官方文档里说 video 元素原生支持 HLS，所以别再自己写 blob 下载了，纯属给自己加戏。

2026-02-25 15:05