video标签自动播放需同时设autoplay和muted属性，否则浏览器拦截；移动端Safari首次交互前禁用autoplay；src失效多因MIME类型错误，应优先用source标签声明type；controls不显示常因尺寸为0或CSS隐藏；填满容器需配合object-fit:cover/contain。
video 标签不自动播放？检查 autoplay 和 muted 是否同时存在
浏览器强制要求带音频的 autoplay 必须配合 muted，否则直接静音或拒绝播放。哪怕视频本身没声音，某些浏览器（如 Chrome）仍会按“可能含音频”策略拦截。
- 正确写法：
<video autoplay muted loop><source src="demo.mp4" type="video/mp4"></video> - 错误写法：
<video autoplay>...→ 大概率白屏或控制台报The request is not allowed by the user agent - 移动端 Safari 更严格：即使
muted，首次交互前也不触发 autoplay，得靠用户点击后 JS 调用play()
src 属性失效？优先用 source 标签并检查 MIME 类型
直接写 src="xxx.mp4" 看似简单，但服务器返回的 Content-Type 错了就加载失败——比如返回 text/plain 而不是 video/mp4，Chrome 会静默拒绝解码。
- 推荐写法：用
<source>显式声明类型，便于浏览器快速决策<video controls><source src="clip.webm" type="video/webm"><source src="clip.mp4" type="video/mp4"></video> - 本地测试时双击打开 HTML 文件（
file://协议），部分浏览器禁用视频加载，必须起本地服务（如python3 -m http.server） - MP4 不是万能：iOS Safari 对 H.264 编码兼容好，但若用 AV1 或 HEVC 编码，多数老设备直接不显示
controls 属性没反应？确认 video 元素尺寸和父容器状态
常见假象是“控件不出现”，其实是因为 video 高度为 0 或被 CSS 隐藏。浏览器只在有渲染尺寸且未被 display: none 或 visibility: hidden 干预时才激活 controls。
- 检查是否设置了
width和height（哪怕只是width: 100%+ 父容器有宽） - 避免父元素用了
overflow: hidden切掉 controls 区域 - 不要对
video设position: absolute后忘了配top/left，导致它跑出视口 - 如果用 JS 动态插入，确保 DOM 已挂载再设置
controls = true，否则无效
怎么让视频填满容器又不拉伸？object-fit 是关键
默认情况下 video 会按原始宽高比缩放，但常需要“覆盖全容器”或“居中裁剪”，这时 width: 100%; height: 100% 不够，必须加 object-fit。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover→ 填满且保持比例，超出部分裁剪（适合背景视频） -
object-fit: contain→ 完整显示，留黑边（适合教学类需看清全部画面） - 注意兼容性：
object-fit在 IE 完全不支持，Edge 16+ 才开始支持 - 别用
background-video这种伪方案——无法响应play()/pause()，也不能被屏幕阅读器识别
play() 调用失败，十次里有八次是因为没等 canplay 事件就急着播。 
