用+object-fit:cover+position:fixed可稳定全屏背景视频；必须加muted、autoplay、loop、playsinline属性，mp4格式优先；视频z-index:-1垫底，内容容器设position:relative，遮罩层pointer-events:none。
用 <video></video> 标签实现全屏背景视频的最小可行方案
直接上核心：用 <video></video> + CSS object-fit: cover + position: fixed 就能稳定撑满视口，不需要 JS 控制尺寸。关键不是“怎么播”，而是“怎么不干扰内容”和“怎么不卡顿”。
常见错误是把视频塞进 后加 width: 100vw; height: 100vh，结果在移动端拉伸变形、在 Safari 上静音失败、在 Chrome 下自动暂停——这些都不是 bug，是规范行为。
- 视频必须加
muted属性，否则 Chrome/Firefox/Safari 都会阻止自动播放 - 必须加
autoplay和loop，缺一不可；仅autoplay在多数浏览器中会被静音策略拦截 - 推荐用
mp4（H.264）格式，兼容性最稳；WebM 可作为备选，但 iOS 不支持 - 不要设
controls，背景视频不该暴露控制条
CSS 层叠顺序和遮罩层怎么写才不遮不住文字
视频本身要“垫底”，但又不能挡住后面的内容。靠 z-index 不够，得配合层级结构和 pointer-events。
- 把
<video></video>放在最顶部，设z-index: -1（比默认层还低），比设z-index: 1更安全 - 给后续所有内容容器（比如
<main></main>或<div class="content">）加 <code>position: relative，否则 z-index 无效 - 如果需要半透明遮罩提升文字可读性，不要用
background: rgba()直接盖在视频上，而要用独立<div> 层叠在视频之上、内容之下，设 <code>pointer-events: none避免遮挡点击示例结构：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<video autoplay muted loop playsinline><source src="bg.mp4" type="video/mp4"></source></video><div class="overlay"></div> <main>你的文字和按钮在这里</main>
移动端 Safari 的
playsinline和自动播放限制iOS Safari 是唯一强制全屏播放的主流环境，不处理就会点开跳转全屏、失去页面控制权。
- 必须加
playsinline属性，且不能只写playsinline="true"—— 它是布尔属性，写成playsinline即可 -
webkit-playsinline是旧版前缀，现在可省略；但如果你还要支持 iOS 10 以下，可以加上 - 即使加了
playsinline，首次加载仍可能黑屏 1–2 秒，这是解码延迟，不是代码问题；建议视频开头留 0.5 秒黑帧或渐入 - 不要依赖
loadstart或canplay做“加载完成提示”，移动端事件触发不可靠
性能和体积怎么平衡：压缩、裁剪、懒加载取舍
背景视频不是越高清越好，3–5 MB 是网页可接受的临界点。超过 8 MB，首帧延迟明显，3G 网络下大概率白屏。
- 用
ffmpeg压缩时优先降分辨率（如 1920×1080 → 1280×720），比降码率更有效；H.264 编码用-crf 23平衡画质与体积 - 裁掉视频上下/左右冗余区域（比如人物特写），用
crop滤镜提前裁切，比靠 CSSobject-fit拉伸更省 GPU - 不要对背景视频做 lazy loading：没有
loading="lazy"支持，且延迟加载会破坏自动播放链路 - 如果首页有多个视频候选项（比如按时间切换），用 JS 切换
src而非预加载全部，避免带宽浪费
真正难的不是让视频铺满，而是让它在各种设备上都保持静音、不跳、不卡、不抢焦点——这些细节没被封装进任何框架，得自己一层层压住。
- 必须加
