autoplay 和 muted 必须同时使用才能实现无交互自动播放，因浏览器将有声自动播放视为高干扰行为；标准结构还需 loop 和 playsinline（含 webkit-playsinline），配合 CSS 的 position: fixed、object-fit: cover 等确保全屏沉浸式播放。
autoplay 和 muted 必须同时使用，才能在现代浏览器中实现无交互自动播放——这是当前所有主流浏览器（包括 Chrome、Firefox、Safari、Edge 及微信内置浏览器）的强制策略。单独写 autoplay 会被静默拦截，用户不点屏幕就永远播不了。
为什么必须加 muted
浏览器出于用户体验和流量节省考虑，把“有声自动播放”列为高干扰行为。只要视频带音频轨道，哪怕音量设为 0，只要 muted 属性没显式声明，autoplay 就无效。muted 不是可选项，是解锁 autoplay 的钥匙。
- 即使你用 JavaScript 调用 video.play()，没有 muted 也会抛出 Promise rejected 错误
- iOS Safari 和 Android 微信对音频更敏感，未 muted 的视频在页面加载后直接被禁播
- poster 图片会一直停留，直到用户手动点击或触发触摸事件
基础 HTML 结构要写全这四个关键属性
只写 <video autoplay></video> 是不够的。标准背景视频标签应包含：
- autoplay：声明自动开始
- muted：强制静音，绕过策略拦截
- loop：避免播完黑屏或跳转，保持视觉连贯
- playsinline（+ webkit-playsinline）：防止 iOS/Safari 强制全屏，确保内联播放
示例代码：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
CSS 配合才能真正“沉浸”
光有 autoplay+muted 只解决“能播”，不解决“怎么铺满”“会不会穿帮”。关键样式如下：
- position: fixed：让视频脱离文档流，固定在视口层级最底层
- min-width: 100vw; min-height: 100vh：确保覆盖整个视口
- width: auto; height: auto：防止拉伸变形
- object-fit: cover：等比缩放并裁剪，填满且不失真
- z-index: -1：保证内容层（如标题、按钮）始终在视频上方
移动端兼容要额外注意
微信安卓版虽默认支持内联，但低版本仍可能忽略 playsinline；iOS 则严格依赖 webkit-playsinline + muted。建议统一加上：
- HTML 中保留 playsinline webkit-playsinline muted autoplay loop
- 避免依赖 JS 的 load 或 canplay 事件再调 play()，多数情况直接靠属性更稳
- 准备 poster 属性（静态首帧图），应对极端加载失败场景
- 视频编码选 H.264 + AAC，格式优先 .mp4，兼容性最广
