移动端H5背景视频“秒开”的核心是首帧快、解码轻、不抢资源，需联动编码策略、加载时机与设备适配：统一≤1280×720分辨率，仅用H.264 MP4与VP9 WebM格式，FFmpeg压缩时启用faststart、去音频、等比缩放加黑边；低端机或WebView主动降级为≤80KB WebP海报；视频懒加载、非关键渲染、iOS必加playsinline muted loop。
移动端 H5 落地页里用背景视频，想“秒开”，核心不是压得越小越好，而是让首帧快、解码轻、不抢资源。体积只是其中一环，必须和编码策略、加载时机、设备适配联动处理。
选对格式与分辨率，砍掉冗余像素
别用 4K 或 1080p 视频做背景——中低端安卓机连 720p 解码都吃力。统一用 ≤1280×720 分辨率，宽高比适配常见屏幕（如 16:9 或 9:16 竖版）。格式只保留两个：H.264 编码的 MP4（兼容所有机型），再加一个 VP9 编码的 WebM（Chrome/新版 WebView 更省带宽）。不要塞 OGG 或 AV1，老机型不认，还白占体积。
用 FFmpeg 精准压缩，重点优化首帧体验
直接上传原始视频必然卡顿。用 FFmpeg 压缩时加这组参数：
- -vcodec libx264 -crf 28 -preset fast：平衡画质与体积，CRF 28 是视觉无损下较优值
- -movflags +faststart：把 moov 头移到文件开头，浏览器不用下载完就能开始播放
- -an：彻底去掉音频轨道（背景视频不需要声音）
- -vf "scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2:black"：等比缩放+黑边填充，避免拉伸变形
移动端主动降级，不播视频才是最快加载
真机上强行播视频，不如干脆不播。用 JS 检测设备性能后直接替换：
立即学习“前端免费学习笔记（深入）”；
- 通过
navigator.hardwareConcurrency < 4或screen.width < 720判断低端机 - 用
matchMedia('(max-width: 768px)')+navigator.userAgent识别微信内置浏览器、QQ 浏览器等常用 WebView - 满足任一条件，就用
video.parentElement.replaceChild(imgEl, video)替换为一张高度压缩的 WebP 海报图（体积控制在 80KB 内）
加载策略收紧，不让视频拖慢首屏
背景视频不是关键内容，不能让它阻塞页面渲染：
- HTML 中
<video>标签不写autoplay，初始设preload="metadata" - 用
IntersectionObserver监听是否进入视口，进入后再调play() - 监听
visibilitychange，切到后台标签页时pause()并清空src防内存泄漏 - iOS 设备必须加
playsinline muted loop，否则 Safari 会拦截播放或强制全屏
本质上，秒开不是靠“把视频压到 500KB”，而是让设备在它能扛住的范围内，用最轻的方式呈现动态背景。该降级时果断降级，该懒加载时绝不提前加载，该删音轨时不留一丝音频数据。
