页面多JWPlayer实例：播放新视频时暂停其他视频

我完全懂你现在的困扰——多个JWPlayer视频同时播放的体验确实糟心，咱们来一步步把这个问题解决掉。

首先，问题的核心在于没有给每个播放器实例绑定播放事件，也没在事件触发时批量操作其他实例执行暂停/停止。你之前直接调用jwplayer().stop()大概率是因为没指定具体实例，或者没正确监听播放状态变化。

具体实现方案 #

1. 统一管理所有播放器实例 #

先给每个视频容器分配唯一ID，初始化时把每个播放器实例存入数组，方便后续批量操作：

<div class="col-lg-4">
  <div id="video1"></div>
</div>
<div class="col-lg-4">
  <div id="video2"></div>
</div>
<!-- 更多视频容器以此类推 -->

<script type="text/javascript">
// 用数组保存所有播放器实例
const allPlayers = [];

// 初始化第一个播放器
const player1 = jwplayer('video1').setup({
  file: '你的视频地址1',
  width: '100%',
  // 其他配置项（比如封面、自动播放等）
});
allPlayers.push(player1);

// 初始化第二个播放器
const player2 = jwplayer('video2').setup({
  file: '你的视频地址2',
  width: '100%',
  // 其他配置项
});
allPlayers.push(player2);

// 更多播放器重复上述初始化逻辑，并存入allPlayers数组
</script>

2. 绑定播放事件，实现互斥暂停 #

给每个播放器绑定play事件，当任意一个视频开始播放时，遍历数组里的其他实例，执行暂停操作：

// 遍历所有播放器，绑定播放监听
allPlayers.forEach(currentPlayer => {
  currentPlayer.on('play', () => {
    // 暂停所有正在播放的其他视频
    allPlayers.forEach(player => {
      if (player !== currentPlayer && player.getState() === 'playing') {
        player.pause(); // 也可以用player.stop()，根据你的需求选择
      }
    });
  });
});

3. 为什么之前的尝试没生效？ #

• 直接调用jwplayer().stop()没有指定具体实例，可能只操作了第一个初始化的播放器，甚至找不到目标实例；
• 没有监听play事件，无法在用户触发播放动作时自动触发暂停其他视频的逻辑；
• 没有维护所有播放器的引用集合，没法批量操作其他实例。

额外优化：容错处理 #

如果担心部分播放器状态获取异常，可以加个容错判断，避免报错影响其他功能：

allPlayers.forEach(player => {
  if (player !== currentPlayer) {
    try {
      const state = player.getState();
      // 同时处理正在播放和缓冲中的状态
      if (state === 'playing' || state === 'buffering') {
        player.pause();
      }
    } catch (e) {
      console.log('操作播放器失败:', e);
    }
  }
});

这样配置后，用户点击任意视频播放时，其他正在播放的视频都会自动暂停，完美解决多视频同时播放的问题。

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