如何实现多YouTube视频在独立Player容器中各自播放？

页面需实现三个YouTube视频独立播放：每个视频点击对应按钮后，在专属的div容器中启动播放。但当前脚本仅支持单个div播放，且HTML中三个容器都使用了重复的id="player"，导致无法实现独立播放需求。

修改后的HTML代码 #

<div>
  <div id="player1"></div>
  <button onclick="youtubevideo('o5x6t68xVVE', 'player1')">播放视频1</button>
</div>   

<div>
  <div id="player2"></div>
  <button onclick="youtubevideo('wJp-BZpVBPA', 'player2')">播放视频2</button>
</div>

<div>
  <div id="player3"></div>
  <button onclick="youtubevideo('sPhhZg9v9NU', 'player3')">播放视频3</button>
</div>

修改后的JavaScript代码 #

// 异步加载YouTube IFrame Player API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 用对象存储多个播放器实例，键为容器ID
var players = {};

function onYouTubeIframeAPIReady() {
  // API加载完成后的回调函数，保持空实现即可
}

// 播放器就绪后的操作
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

// 渲染指定容器的视频播放器
function youtubevideo(videoIdval, containerId) {
  // 若该容器已有播放器实例，先销毁
  if (players[containerId]) {
    players[containerId].destroy();
  }

  // 创建新播放器实例并存入对象
  players[containerId] = new YT.Player(containerId, {
    width: '100%',
    videoId: videoIdval,
    playerVars: {
      'autoplay': 1,
      'playsinline': 1,
      'origin': window.location.href
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

核心修改说明 #

• 唯一容器ID: 将三个容器的id改为player1、player2、player3，避免DOM元素id重复导致的选择错误。
• 多实例管理: 用对象players存储每个容器对应的播放器实例，替代原有的单个变量，实现独立控制每个播放器。
• 扩展函数参数: 给youtubevideo新增containerId参数，明确指定视频要渲染的目标容器，实现按钮与容器的一一对应。
• 独立销毁逻辑: 销毁播放器时仅针对当前容器的实例操作，不会影响其他容器的视频播放状态。

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