Flutter Web视频发布后无法播放，本地及调试模式正常求解决

核心排查方向及解决办法 #

• 静态资源路径错误
  本地调试时的相对路径在上线后可能失效。确认视频文件放在web/assets目录，且pubspec.yaml中正确声明资源：

  flutter:
    assets:
      - assets/videos/
  

  加载视频时，要么用AssetPlayer读取打包后的资源，要么使用完整的绝对网络URL，避免依赖本地路径逻辑。

• CORS跨域限制
  若视频托管在第三方服务器，浏览器会因跨域策略拦截请求。需要在视频服务器配置CORS规则，允许你的网站域名访问。以Nginx为例，添加响应头：

  add_header Access-Control-Allow-Origin "你的站点域名";
  add_header Access-Control-Allow-Methods "GET, HEAD";
  

• 打包渲染器选择错误
  Canvaskit渲染器对视频的支持存在局限性，发布时强制使用HTML渲染器：

  flutter build web --release --web-renderer html
  

  调试模式默认用HTML渲染，所以本地正常，上线若切换成Canvaskit就会出问题。

• 视频格式/编码不兼容
  不同浏览器对视频编码支持有差异，比如Safari仅支持H.264编码的MP4。用FFmpeg转成兼容格式：

  ffmpeg -i input.mp4 -c:v libx264 -crf 23 -c:a aac output.mp4
  

  同时提供WebM格式作为备选，覆盖更多浏览器。

• HTTPS混合内容拦截
  如果站点是HTTPS，视频资源必须也用HTTPS，否则浏览器会阻止加载HTTP资源。检查视频URL协议是否一致。

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