Django部署Heroku后静态视频无法在Chrome/Edge播放问题求助

1 优先排查视频编码兼容性 #

• Chrome/Edge对MP4的编码要求比Firefox严格，仅原生支持H.264视频编码+AAC音频编码的MP4格式，如果你的视频用了H.265/HEVC、VP9等编码，就会出现Firefox可播、Chromium内核浏览器无法播放的情况。
• 解决方案：用ffmpeg工具转码，执行命令：
  ffmpeg -i landing_video.mp4 -vcodec h264 -acodec aac landing_video_new.mp4
  转码后替换原文件重新部署即可。

2 检查静态文件的Range请求支持 #

• Chrome/Edge播放视频时默认发送Range分片请求，要求服务端返回206状态码，而Firefox可直接加载完整视频文件。如果Django的静态文件服务（比如低版本whitenoise）不支持Range请求，就会触发该问题。
• 解决方案：
  • 升级whitenoise到最新版本：pip install --upgrade whitenoise
  • 确认Django配置文件中whitenoise中间件配置正确，放置在所有其他中间件的最上方。
  • 如果静态文件托管在第三方存储服务中，确认该服务开启了Range请求支持。

3 修正video标签属性与MIME类型 #

• 给video标签补充适配属性，同时给静态资源加版本号强制刷新缓存，修改后的标签示例：

<video autoplay loop muted playsinline preload="auto">
  <source src="{% static "forms/landing_video.mp4" %}?v=2024" type="video/mp4">
</video>

• 打开Chrome开发者工具的「网络」面板，筛选Media类型，查看视频请求的响应头，确认Content-Type字段值为video/mp4，如果返回的是application/octet-stream，需要在Django配置中添加MIME类型映射，或者调整静态文件服务的MIME配置。

4 其他排查方向 #

• 清空Chrome/Edge浏览器缓存后重新测试，排除本地缓存损坏的问题。
• 检查Heroku部署日志，确认视频文件完整上传到了部署环境，没有出现文件大小异常、上传中断的情况。

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