youtube iframe api在另一个正在播放时停止视频答案

【问题标题】：youtube iframe api stopping a video when the other is playingyoutube iframe api在另一个正在播放时停止视频
【发布时间】：2020-08-24 05:52:51
【问题描述】：

我有一个包含多个视频的滑块。我希望能够在播放另一个视频时停止视频（如果它正在播放）。

我不是 js 专家，所以我在使它工作时遇到了一些麻烦。

我已经创建了这支笔：https://codepen.io/vlrprbttst/pen/eYpMrmB?editors=1010 作为起点，但我不知道如何继续。我想这部分与我正在寻找的东西有关：

events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }

但我不确定如何使用它：/

我曾经使用一种并不总是有效的方法，它依赖于一个复杂的系统，该系统具有一个不可见的 iframe 覆盖，可以触发使用 jquery 播放/暂停视频，但它并不总是有效（你可以在这里看到：https://codepen.io/vlrprbttst/pen/vxrWzQ)。我一直在网上寻找，但我只能找到同时播放多个视频。

如果在同一页面上播放不同的视频，有关如何检测视频播放并停止它的任何建议？有或没有 jquery 都可以。

提前谢谢你

【问题讨论】：

标签： javascript jquery video youtube youtube-iframe-api

【解决方案1】：

我建议您创建自己的 YouTube 播放器并将每个 om 存储在一个数组中。这样，您始终可以在回调中遍历它们中的每一个并控制应该发生的事情。

首先创建一个空数组来存储播放器和（可选）一个数组，其中包含具有视频 ID 的对象和要在其中创建播放器的元素。

let youtubePlayers = [];
const youtubeVideosSources = [
  {
    id: 'M7lc1UVf-VE',
    player: 'player1'
  },
  {
    id: 'VFQB1zE9zYU',
    player: 'player2'
  }
];

在您的就绪回调中，使用带有 id 和播放器的数组的 map() 方法创建一个新的 YouTube 播放器数组，并将它们存储在您之前创建的空数组中。或者在这种情况下，覆盖变量的值。

function onYouTubeIframeAPIReady() {
  youtubePlayers = youtubeVideosSources.map(({ id, player }) => new YT.Player(player, { 
    height: '360',
    width: '640',
    videoId: id,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  }));
}

然后在onPlayerStateChange 回调循环中遍历每个播放器，如果它们不是当前激活的播放器并且实际上正在播放，则停止它们。您可以使用getPlayerState() 方法检查每个玩家的状态。

function onPlayerStateChange(event) {
  const playing = YT.PlayerState.PLAYING;
  if (event.data === playing) {
    for (const player of youtubePlayers) {
      if (player !== event.target && player.getPlayerState() === playing) {
        player.stopVideo();
      }
    }
  }
}

【讨论】：