HTML Video标签controls控件在Firefox浏览器中失效问题咨询

核心触发原因 #

Firefox对媒体资源的校验规则比Chrome更严格，单独测试MP4正常说明代码基础逻辑没问题，故障出在当前请求的视频资源配置或服务端响应配置不符合Firefox的要求，常见原因如下：

• Content-Type配置错误：Firefox要求MP4资源必须返回正确的Content-Type: video/mp4响应头，如果服务端返回text/plain、application/octet-stream等其他MIME类型，会导致浏览器无法识别资源为视频，Chrome有更高的容错性因此可以正常播放。
• Range请求支持缺失：Firefox播放视频默认会先发HEAD请求校验资源，再通过带Range头的请求分段拉取内容，如果服务端不支持Range请求，没有返回206 Partial Content状态码，而是直接返回200全量内容，会导致视频解析卡住。
• 视频编码不符合规范：同样是MP4封装，Firefox仅支持H.264（AVC）编码的视频流、AAC编码的音频流，如果该视频使用了H.265、MPEG-4等其他视频编码，或者MP3等其他音频编码，就会出现识别失败的情况，单独测试的MP4编码符合要求因此可正常播放。
• 跨域配置不完整：如果视频资源和页面不在同域，Firefox要求资源响应头必须携带匹配的Access-Control-Allow-Origin，同时允许Range头通过跨域校验，配置缺失会导致视频加载失败。

解决步骤 #

• 打开Firefox开发者工具，切换到「网络」面板，过滤「媒体」类型请求，触发播放后查看视频资源的响应信息：
  • 校验Content-Type是否为video/mp4，不符合的话修改服务端/CDN的MIME类型配置
  • 校验响应状态码是否为206，如果返回200需要开启服务端的Range请求支持
  • 跨域场景下校验Access-Control-Allow-Origin是否和页面域名匹配，同时Access-Control-Allow-Headers已放开Range参数
• 检查故障视频的编码格式，可通过FFmpeg执行命令ffmpeg -i 视频文件路径查看编码信息，确认视频编码为H.264、音频编码为AAC，不符合的话转码后再测试
• 给标签显式添加type属性，明确告知浏览器资源类型，修改后的代码如下：

<video id="loadedVideo" style="width:1340px;height:830px;" controls>
  <source src="url?file=file-4c369dc4cf165ef426c42502e088bee8e403c1d67096e608d4b5227b6fa71d12ff5977a3f66d4e3f5732e8ef78bbec3d" type="video/mp4">
</video>

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