用<video>+object-fit:cover+position:fixed可稳定全屏背景视频；必须加muted、autoplay、loop、playsinline属性，mp4格式优先；视频z-index:-1垫底，内容容器设position:relative，遮罩层pointer-events:none。

用 <video> 标签实现全屏背景视频的最小可行方案

直接上核心：用 <video> + CSS object-fit: cover + position: fixed 就能稳定撑满视口，不需要 JS 控制尺寸。关键不是“怎么播”，而是“怎么不干扰内容”和“怎么不卡顿”。

常见错误是把视频塞进 <body> 后加 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> 放在 <body> 最顶部，设 z-index: -1（比默认层还低），比设 z-index: 1 更安全
• 给后续所有内容容器（比如 <main> 或 <div class="content">）加 position: relative，否则 z-index 无效
• 如果需要半透明遮罩提升文字可读性，不要用 background: rgba() 直接盖在视频上，而要用独立 <div> 层叠在视频之上、内容之下，设 pointer-events: none 避免遮挡点击

示例结构：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

<body>
  <video autoplay muted loop playsinline>
    <source src="bg.mp4" type="video/mp4">
  </video>
  <div class="overlay"></div>
  <main>你的文字和按钮在这里</main>
</body>

移动端 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 滤镜提前裁切，比靠 CSS object-fit 拉伸更省 GPU
• 不要对背景视频做 lazy loading：没有 loading="lazy" 支持，且延迟加载会破坏自动播放链路
• 如果首页有多个视频候选项（比如按时间切换），用 JS 切换 src 而非预加载全部，避免带宽浪费

真正难的不是让视频铺满，而是让它在各种设备上都保持静音、不跳、不卡、不抢焦点——这些细节没被封装进任何框架，得自己一层层压住。