使用<cast-media-player>投屏至自定义接收器遇LOAD_FAILED错误

我之前也碰到过几乎一模一样的问题——用原生<video>元素投屏完全正常，但不管是新版CAF还是旧版v2的<cast-media-player>组件都会触发LOAD_FAILED错误，折腾了好一阵才理清几个关键的排查方向，分享给你：

• 严格检查内容安全策略（CSP）配置
  CAF接收器对CSP的要求比原生<video>要苛刻得多。如果你的媒体资源来自外部域名，必须在HTML的<meta>标签里明确添加media-src权限，同时script-src要包含Cast官方的资源域名（比如https://www.gstatic.com）。我当初就是漏加了媒体源的CSP规则，导致<cast-media-player>加载媒体时被拦截，而原生<video>因为浏览器的宽松检查反而能正常播放。

• 验证媒体元数据的规范性
  <cast-media-player>对Sender发送的媒体元数据格式要求很严格：

  • contentType必须是标准MIME类型（比如video/mp4，不能只写mp4）
  • contentId必须是可直接访问的媒体URL，不能包含未转义的特殊字符
  • 确保没有遗漏streamType（比如BUFFERED或LIVE）这类必填参数
    你可以对比一下用<video>时手动设置的资源地址，和Sender端发送的contentId是否一致，元数据有没有不符合规范的地方。

• 确认接收器初始化流程的正确性
  对于CAF接收器，一定要确保在调用cast.framework.CastReceiverContext.getInstance().start()之前，完成所有必要的配置，比如：

  const context = cast.framework.CastReceiverContext.getInstance();
  const playerConfig = new cast.framework.PlayerConfig();
  // 这里添加必要的配置，比如supportedMediaCommands
  context.start(playerConfig);
  

  我之前试过把初始化代码放在DOMContentLoaded事件之前，导致<cast-media-player>没有正确绑定到接收器上下文，虽然<video>能独立工作，但Cast的控制逻辑完全没连上，最终触发LOAD_FAILED。

• 利用Chrome DevTools抓详细错误日志
  别只看投屏端的LOAD_FAILED提示，打开Chrome的chrome://inspect页面，找到你的Cast设备并打开DevTools：

  • 在Console标签里看有没有具体的错误栈（比如CSP拦截、脚本加载失败）
  • 在Network标签里检查媒体资源的请求状态（比如403、404或者跨域问题）
    这些日志往往能直接定位问题，我当时就是通过DevTools发现CSP阻止了媒体请求，才找到根源的。

• 尝试最简版本的接收器代码
  把你的自定义接收器代码简化到极致：只保留CAF的基础初始化代码和<cast-media-player>标签，去掉所有自定义样式、第三方脚本和复杂逻辑。如果最简版本能正常工作，再逐步加回你的代码，排查是哪部分逻辑和<cast-media-player>冲突了。

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