基于相同播放列表创建JW Player实例，实现Chromecast会话续连

我刚好处理过几乎一模一样的场景——在单页应用里用JW Player做Chromecast投屏，要解决切换视频、刷新页面后保留投屏会话的问题，分享下亲测有效的解决方案：

核心思路 #

关键是复用全局的Chromecast会话实例，而不是每次初始化JW Player都重新创建新的投屏连接。同时利用Chromecast的自动会话恢复机制，配合JW Player的Cast插件配置来实现无缝衔接。

1. 初始化全局Cast上下文（APP入口执行） #

首先在你的SPA入口文件（比如app.js）里初始化Chromecast的CastContext，并设置自动加入策略为ORIGIN_SCOPED，这样同一域名下的页面刷新/路由切换会自动恢复之前的投屏会话：

// 初始化全局CastContext
const castContext = cast.framework.CastContext.getInstance();
castContext.setOptions({
  autoJoinPolicy: cast.framework.AutoJoinPolicy.ORIGIN_SCOPED,
  receiverApplicationId: 'YOUR_CHROMECAST_RECEIVER_ID' // 替换成你的接收器ID，默认可用官方通用ID
});

注：ORIGIN_SCOPED策略会让Chromecast自动恢复当前域名下最近活跃的会话，完全贴合SPA的场景需求。

2. 复用JW Player实例与Cast会话 #

不要每次切换视频都销毁并重新创建JW Player实例！改用player.load()方法加载新视频，同时在初始化播放器时关联已有的Cast会话：

// 全局保存JW Player实例（避免重复创建）
let globalPlayer;

// 初始化播放器（页面加载/路由切换时执行）
function initPlayer(initialVideoUrl) {
  if (globalPlayer) {
    // 已有播放器实例，直接加载新视频
    globalPlayer.load({ file: initialVideoUrl });
    return;
  }

  // 首次创建播放器，关联现有Cast会话
  const currentSession = castContext.getCurrentSession();
  globalPlayer = jwplayer('player-container').setup({
    file: initialVideoUrl,
    width: '100%',
    height: 'auto',
    cast: {
      enabled: true,
      // 关键：绑定已有的投屏会话
      session: currentSession
    }
  });
}

// 切换视频的函数
function switchVideo(newVideoUrl) {
  if (!globalPlayer) return;
  
  // 先更新本地播放器
  globalPlayer.load({ file: newVideoUrl });
  
  // 如果当前处于投屏状态，直接将新视频推送到Chromecast
  const currentSession = castContext.getCurrentSession();
  if (currentSession) {
    const mediaInfo = new cast.framework.messages.MediaInfo(
      newVideoUrl,
      'video/mp4' // 根据你的视频格式调整MIME类型
    );
    currentSession.loadMedia({
      mediaInfo,
      autoplay: true // 可选：是否自动播放新视频
    });
  }
}

3. 页面刷新/路由切换后的会话恢复 #

在SPA的路由守卫或页面加载完成事件中，检查是否存在活跃的Cast会话，如果有，直接将JW Player关联到该会话，甚至可以直接把新视频加入投屏队列：

// 监听页面加载完成（SPA路由切换后也可触发）
document.addEventListener('DOMContentLoaded', () => {
  const currentSession = castContext.getCurrentSession();
  const targetVideoUrl = getCurrentPageVideoUrl(); // 替换成你获取当前页面视频URL的逻辑
  
  if (currentSession) {
    // 已有投屏会话，直接初始化播放器并绑定会话
    initPlayer(targetVideoUrl);
    
    // 可选：自动将当前视频推送到投屏设备（如果需要）
    const mediaInfo = new cast.framework.messages.MediaInfo(targetVideoUrl, 'video/mp4');
    currentSession.loadMedia({ mediaInfo, autoplay: false });
  } else {
    // 无活跃会话，正常初始化播放器
    initPlayer(targetVideoUrl);
  }
});

4. 关键注意事项 #

• JW Player版本：确保使用v8及以上版本的JW Player，旧版本的Cast插件可能不支持会话复用。
• HTTPS环境：Chromecast投屏仅支持HTTPS协议（localhost开发环境例外），部署时必须使用HTTPS。
• 接收器配置：如果使用自定义Chromecast接收器，确保接收器支持队列管理，这样可以直接添加视频到投屏队列而不是替换当前播放内容。

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