为何<video>标签无法加载MP4背景视频？提示格式不支持求解

以下是几个常见的排查方向，按优先级尝试：

• MP4容器内的编码不兼容
  MP4只是视频容器格式，浏览器对内部编码有明确要求，H.264（avc1编码）+ AAC音频是所有现代浏览器通用支持的组合。你可以用FFmpeg工具检查视频编码：

  ffmpeg -i volny.mp4
  

  查看输出中Video:行的编码信息，如果不是H.264，用FFmpeg转码修复：

  ffmpeg -i volny.mp4 -c:v libx264 -crf 23 -c:a aac fixed_volny.mp4
  

• 服务器MIME类型配置错误
  浏览器依赖服务器返回的Content-Type头识别视频类型，如果服务器返回的不是video/mp4，即使视频本身没问题也会报错。

  1. 打开浏览器开发者工具（F12）→ 切换到「Network」标签
  2. 刷新页面，找到视频请求，查看「Response Headers」里的Content-Type字段
  3. 如果不正确，根据服务器类型调整配置：
     • Nginx：在配置文件中添加types { video/mp4 mp4; }
     • Apache：在.htaccess中添加AddType video/mp4 .mp4
     • 本地开发服务器（如Live Server）：确保工具默认配置正确识别MP4类型

• 路径的相对/绝对匹配问题
  你使用的/assets/volny.mp4是根路径，本地开发时如果项目目录不是服务器根目录，会导致文件找不到。可以改成相对路径尝试：

  <source src="./assets/volny.mp4" type="video/mp4">
  

  同时确认assets文件夹确实在当前HTML文件的同级目录下。

• 浏览器缓存干扰
  之前的错误请求可能被浏览器缓存，导致新的正确请求无法生效。在开发者工具的「Network」标签勾选「Disable cache」，然后刷新页面重新加载视频。

• 视频文件本身损坏
  直接在浏览器地址栏输入视频的完整URL，看能否正常播放。如果不能，说明文件可能损坏，重新获取或生成视频文件。

内容的提问来源于stack exchange，提问作者Carl