用HTML5视频做网页背景需兼顾性能与兼容性：优先H.264 MP4+WebM备选，分辨率≤1280×720，FFmpeg压缩参数优化，禁音、preload="metadata"、移动端降级静态图，absolute/fixed定位+层级控制，懒加载+可视区检测，iOS需用户手势触发播放。
用HTML5视频做网页背景确实视觉效果强，但容易卡顿、加载慢、遮挡内容或在移动端失效。关键不是“能不能放”，而是“怎么放得稳、不拖累页面、还能正常交互”。
视频格式与编码选对才省资源
浏览器对视频解码能力差异大，盲目上传MP4就跑不起来。优先用H.264编码的MP4（兼容性最好），同时提供WebM作为备选（尤其对Firefox/Chrome新版本更友好）。分辨率不必超过1280×720——背景视频不是观影，高分辨率只增加首屏加载时间和内存占用。用FFmpeg压缩时加参数：-vcodec libx264 -crf 28 -preset fast -movflags +faststart，能显著缩短缓冲时间。
- 禁用音频轨道（mute 属性必须设，且加 autoplay 和 loop）
- 用 preload="metadata" 替代 "auto"，避免预加载整段视频
- 移动端建议通过 Media Queries 或 JS 检测后直接替换为静态图（GIF或海报图），省电又保流畅
层级与覆盖关系必须手动控制
video 默认是 inline 元素，z-index 不生效。必须显式设为 position: absolute 或 fixed，并包裹进一个相对定位的容器中统一管理层叠上下文。
- 背景视频容器设 z-index: -1（注意：需父容器有 position: relative 才有效）
- 内容区域用 position: relative + 更高 z-index（如 10），确保可点击、可滚动
- 避免给 video 设 opacity 或 transform（如 scale），可能触发额外合成层，反而增加GPU负担
懒加载与生命周期要主动干预
页面一打开就播视频，用户还没看到就白耗流量。应结合可视区检测和播放状态管理：
- 初始设 poster 属性显示占位图，video 标签不带 autoplay
- 用 IntersectionObserver 监听视频是否进入视口，进入后再调用 play()
- 监听 pause 和 ended 事件，暂停时释放资源（如设置 src = ""）
- 用户切到其他标签页时，监听 visibilitychange 事件暂停视频，切回再恢复
兼容性兜底不能靠“试试看”
iOS Safari 限制自动播放（即使静音），部分安卓WebView也不支持 loop。别只写一个 video 标签了事。
- 用 canPlayType() 检查浏览器支持度，不支持则插入 img 或 CSS 背景图
- 对 iOS 加特殊处理：监听 touchstart 或 click（首次用户手势）后再调 play()，这是唯一可靠唤醒方式
- 服务端可识别 UA，对老旧 WebView 直接返回静态背景，避免前端强行降级失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
