Flutter的video_player 2.6.0部署到Firebase Hosting后无法播放视频求助

排查方向及解决方法 #

1. 跨域（CORS）限制问题 #

调试时Chrome对本地项目的跨域请求有豁免，但部署到Firebase Hosting后，浏览器会严格执行CORS策略，外部视频源（比如示例里的flutter.github.io视频）会被拦截。

• 解决办法：
  • 把视频上传到Firebase Storage，然后配置Storage的CORS规则，允许你的Hosting域名访问。
  • 或者修改firebase.json，添加重写规则代理视频请求，绕开跨域限制：

    {
      "hosting": {
        "rewrites": [
          {
            "source": "/videos/**",
            "destination": "https://flutter.github.io/assets-for-api-docs/assets/videos/$1"
          }
        ]
      }
    }
    

    之后把代码里的视频URL改成相对路径：/videos/bee.mp4

2. 视频编码兼容性问题 #

部分浏览器对视频编码的支持有差异，调试环境的Chrome能播放的编码，部署后可能因为CDN或浏览器环境变化无法加载。

• 解决办法：
  • 确保视频使用H.264编码（MP4容器），这是目前兼容性最广的格式。
  • 用FFmpeg重新编码视频：

    ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output.mp4
    

3. Firebase Hosting缓存问题 #

部署后视频资源可能被CDN缓存，导致旧的错误资源持续被加载。

• 解决办法：
  • 部署时强制刷新缓存：

    firebase deploy --only hosting --force
    

  • 在firebase.json中配置视频文件的缓存规则，缩短缓存时长：

    {
      "hosting": {
        "headers": [
          {
            "source": "**/*.mp4",
            "headers": [
              {
                "key": "Cache-Control",
                "value": "public, max-age=3600"
              }
            ]
          }
        ]
      }
    }
    

4. 代码拼写错误 #

你的代码里dispose()方法有个小错误：_controller. Dispose();多了空格，应该是_controller.dispose();。这个错误可能导致资源泄漏，间接影响视频播放逻辑。

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