必须用语义化<video>标签实现全屏视频背景，设position:fixed、object-fit:cover、z-index:-1，并添加muted autoplay playsinline preload="auto"属性；优先使用MP4格式，避免GIF。
用 <video> 标签直接嵌入，别用 CSS 背景图
HTML 本身不支持把视频设为 background-image，强行用 background: url(video.mp4) 是无效的。必须用语义化的 <video> 标签，再通过定位和缩放覆盖整个视口。
常见错误是把视频放在 <div> 里再设 position: fixed，结果滚动时错位或遮挡内容。正确做法是让 <video> 自身成为全屏层：
- 给
<video>设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; - 加
z-index: -1确保它在内容底层（不是z-index: 1） - 务必加
preload="auto"和muted autoplay，否则 Chrome/Safari 会静音且不自动播放
object-fit: cover 和 contain 的区别直接影响铺满效果
视频原始宽高比往往和屏幕不一致，object-fit 决定如何适配：
-
cover：等比缩放并裁剪，保证填满整个区域，但可能切掉上下或左右部分内容 -
contain：等比缩放并完整显示，但四周会出现黑边或留白 - 移动端 Safari 对
object-fit支持良好，但老版 Android WebView 可能不兼容，需测试
多数全屏背景选 cover；如果视频内容关键信息集中在画面中央（比如人脸），cover 更安全。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
避免自动播放被拦截：muted 是硬性要求，playsinline 不能少
iOS Safari 和新版 Android Chrome 默认禁止有声自动播放，即使用户交互后触发也不行——除非视频静音。
- 必须同时包含
muted和autoplay属性，缺一不可 - iOS 必须加
playsinline，否则视频会跳转到全屏播放器，破坏页面布局 - 部分安卓浏览器要求
webkit-playsinline（可加，不加通常也行） - 不要依赖 JS 在
DOMContentLoaded后调用.play()，成功率低且触发策略越来越严
正确写法：<video muted autoplay playsinline preload="auto"><source src="bg.mp4" type="video/mp4"></video>
性能与兼容性：优先提供 MP4，慎用 WebM，别用 GIF
视频格式影响加载速度、解码效率和兼容范围：
- MP4（H.264 + AAC）：所有主流浏览器支持，编码体积小，首帧快，首选
- WebM（VP9）：Chrome/Firefox 支持好，但 Safari 旧版本不支持，仅作 fallback
- 绝对不要用 GIF 做“视频背景”——体积大、无音频、无法控制播放、CPU 解码压力高
- 建议导出参数：分辨率 1920×1080 或 1280×720，码率 1500–3000 kbps，帧率 24–30 fps
如果视频文件 > 5MB，考虑加 loading 占位符或降质版本，否则首屏白屏时间明显变长。
全屏视频最常被忽略的是z-index: -1 和 playsinline 的组合——少了任一个，iOS 上就大概率失败。另外，别指望靠 JS 补救自动播放限制，规则就是规则。 
