Angular应用部署后Mozilla Firefox无法播放MP4视频问题

问题梳理 #

你的Angular应用里，存放在assets文件夹的H.264编码MP4视频，在本地localhost:4200环境下，Chrome、Firefox、IE10+都能正常播放；但部署到Apache Tomcat或IIS生产服务器后，外网访问时只有Firefox无法播放，内网访问却一切正常。Firefox控制台抛出的报错信息包括：

No Video with Support Format and MIME type Found
HTTP “Content-Type” of “video/mp4” is not supported. Load of media resource https://mydomain.mycompany.com/assets/videos/Beacon_Video_V3.mp4 failed.
Cannot play media. No decoders for requested formats: video/mp4

虽然你确认Firefox支持H.264编码的MP4，但外网环境的特殊配置（比如服务器MIME类型缺失、代理/网关篡改响应头）大概率是问题的核心原因。

核心解决方案：确保服务器正确配置MP4的MIME类型 #

1. Apache Tomcat 配置步骤

Tomcat默认可能未正确设置MP4文件的MIME类型，或者外网代理/防火墙覆盖了响应头，你需要修改配置文件：

• 找到Tomcat安装目录下的conf/web.xml（如果是WAR包部署，也可在项目的WEB-INF/web.xml中添加）
• 添加以下MIME类型映射：

<mime-mapping>
    <extension>mp4</extension>
    <mime-type>video/mp4</mime-type>
</mime-mapping>

• 重启Tomcat服务器，再进行外网访问测试。

2. IIS 配置步骤

如果部署到IIS仍有相同问题，需确认IIS的MIME类型设置：

• 打开IIS管理器，定位到你的站点
• 双击右侧的「MIME类型」选项
• 检查是否存在.mp4的映射，若没有则点击「添加」：
  • 文件扩展名：.mp4
  • MIME类型：video/mp4
• 保存配置后重启站点。

外网环境额外排查点 #

如果配置完MIME类型后问题依旧，要考虑外网链路中的中间节点：

• 代理/CDN设置：检查公司的外网代理、CDN是否篡改了视频文件的Content-Type响应头——有些代理会错误地将MP4的Content-Type改为application/octet-stream，导致Firefox无法识别。
• 防火墙/网关限制：部分外网防火墙可能会拦截或修改视频文件的响应头，或是对视频流做了特殊处理，导致Firefox无法解析。你可以在外网环境下用curl命令获取视频的响应头，确认Content-Type是否为video/mp4：

curl -I https://mydomain.mycompany.com/assets/videos/Beacon_Video_V3.mp4

• 视频编码兼容性优化：虽然你确认是H.264编码，但建议用FFmpeg等工具重新编码视频，确保参数符合Firefox的严格标准：

ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output.mp4

Baseline profile的H.264兼容性更强，适配所有主流浏览器。

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