video标签嵌入本地视频需同时设autoplay和muted才能静音自动播放，ios须加playsinline，src加载失败常因mime类型错误或file://协议限制，controls不显示多因尺寸或css裁剪，换源后须调load()刷新解码器。
video 标签能直接嵌入本地视频，但写错一个属性、漏一个 MIME 声明、或在错误时机调 play()，就大概率白屏、静音失败、控件不显示，甚至移动端完全没反应。
video 自动播放失败？必须同时加 autoplay 和 muted
现代浏览器（Chrome、Edge、Safari）默认拦截带音频的自动播放。哪怕视频本身没声音，Chrome 仍可能按“潜在含音频”策略拒绝 play()。
-
<video autoplay muted src="demo.mp4"></video>—— 可静音自动播 -
<video autoplay src="demo.mp4"></video>—— 控制台报DOMException: play() failed because user interaction is required，页面白屏或卡在加载态 - iOS Safari 更严：即使
muted，首次用户交互前也不触发 autoplay；必须加playsinline才能内联播放，否则强制全屏 - 微信内置浏览器（X5 内核）对
playsinline支持不稳定，可额外加私有属性x5-video-player-type="h5-page"
src 不加载或报 404？优先用 <source></source> 并检查 MIME 类型
直接写 src="clip.mp4" 看似简单，但服务器返回的 Content-Type 错了（比如是 text/plain 而非 video/mp4），Chrome 会静默拒绝解码，Network 面板里看到状态码 200 但视频不出现。
- 正确做法：用
<source></source>显式声明类型，让浏览器快速决策支持与否<video controls><source src="clip.mp4" type="video/mp4"></source></video> - 本地开发时双击打开 HTML（
file://协议），部分浏览器禁用视频加载；必须起本地服务，例如python3 -m http.server - 部署到 Nginx/Apache 后，确认配置了正确的 MIME 类型：
.mp4 → video/mp4，否则 Safari 直接不播 - 路径写错是第一大原因：检查 Network 面板过滤
media类型，看请求是否发出、是否返回 200
controls 不显示？先查尺寸和 CSS 干预
“控件没出来”常是假象——实际是 video 元素高度为 0、被 display: none 或 overflow: hidden 切掉了区域，或者父容器没设宽高。
- 确保
video有渲染尺寸：至少设width: 100%，且父容器有明确宽度（比如max-width: 800px） - 避免父元素用了
overflow: hidden，它可能把底部 controls 区域裁掉 - 如果用
position: absolute，记得配top: 0; left: 0;，否则元素可能跑出视口 - JS 动态插入时，确保 DOM 已挂载再设置
controls = true，否则无效
怎么填满容器又不拉伸？object-fit 是关键，不是 width/height 就够
width: 100%; height: 100% 会让视频强行拉伸变形；默认行为是保持原始宽高比缩放，但常需要“覆盖全容器”或“等比居中”。
-
object-fit: cover→ 填满容器、保持比例、超出裁剪（适合背景视频） -
object-fit: contain→ 等比缩放、完整显示、留黑边（适合教学类内容） - 别忘了加
display: block：video默认是 inline 元素，底部有基线间隙，会导致高度塌陷 - 保持宽高比更稳妥：用
aspect-ratio: 16 / 9（Chrome 88+/Firefox 89+ 支持），老浏览器可用 padding-top 百分比 hack
最易被忽略的点：换 src 后不调 load()，浏览器可能复用旧解码器状态，导致画面卡住、音频错位；iOS 上 playsinline 和 muted 缺一不可；本地测试不用服务器，90% 的“不播放”问题根本没机会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
