video标签无反应应先检查src路径和状态码，常见问题包括404、403、CORS、file://协议限制、MIME类型错误；MP4需H.264+AAC编码；多source兜底时mp4放首位；autoplay必须muted且服务端配置正确。
video 标签没反应？先检查 src 是否加载成功
很多情况根本不是格式问题，而是 src 路径出错或资源未返回 200。浏览器控制台 Network 面板里找对应视频请求，看状态码是不是 404、403 或 CORS 错误。
常见踩坑点：
-
src是相对路径但当前页面 URL 带 hash（如page.html#section），部分浏览器会误解析路径 - 本地双击打开 HTML 文件（
file://协议），Chrome 等浏览器默认禁用video的load行为，必须起本地服务（如python3 -m http.server） - 服务器没配 MIME 类型，比如 .mp4 返回
text/plain，浏览器直接拒播
MP4 播不了？确认编码是否为 H.264 + AAC
HTML5 video 支持的不是“文件扩展名”，而是封装格式（container）+ 视频编码（codec）+ 音频编码（codec）三者组合。MP4 容器本身没问题，但若视频用 AV1 编码、音频用 Opus，Safari 和旧版 Edge 就无法播放。
验证和转码建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ffprobe video.mp4查编码：Stream #0:0: Video: h264 (High)和Stream #0:1: Audio: aac (LC)才稳妥 - 批量转码推荐命令：
ffmpeg -i input.mp4 -c:v libx264 -profile:v high -c:a aac -b:a 128k output.mp4
- 不要依赖“MP4 就能播”的直觉——某些剪辑软件导出的 MP4 默认用 HEVC（H.265），它在 Safari 以外基本不支持
WebM 和 Ogg 怎么选？按浏览器分层兜底
单一 src 属性不够健壮，必须用多个 source 元素让浏览器自主选择。顺序很重要：把兼容性最广的放前面，浏览器遇到第一个能播的就停。
推荐写法（含 fallback 文字）：
说明：
-
video/mp4：覆盖 Chrome、Firefox、Edge、Safari（iOS/macOS）、Android WebView -
video/webm（VP9 + Opus）：Chrome/Firefox 安卓端更省带宽，但 Safari 完全不认 -
video/ogg（Theora + Vorbis）：仅 Firefox 旧版本需要，现在可省略
自动播放失败？静音是硬性前提
Chrome、Safari、Firefox 都强制要求 autoplay 视频必须 muted，否则即使用户已交互过也会被拦截。这不是 bug，是策略。
正确写法：
注意几个关键属性：
-
muted：必须显式写，不能靠 JS 后续设置（时机太晚） -
playsinline：iOS Safari 必加，否则全屏播放且无法自动触发 -
loop：配合autoplay实现背景视频效果，否则播完就停黑屏 - 如果真要带声音自动播，唯一合法路径是用户首次点击/触摸后，再用 JS 调用
play()并捕获 Promise 拒绝
file:// 协议限制——这两项不解决，后面所有编码优化都白搭。 
