单HTML页多YouTube播放器实现问题：API加载报错求助

嘿，作为新手遇到这种问题很正常，我来帮你拆解一下问题根源和解决办法：

为什么会报错？ #

你看到的TypeError: Cannot read property 'parentNode' of undefined，主要是两个原因：

1. 重复加载YouTube API脚本：你复制了整套代码，意味着每次都会执行document.createElement('script')去加载API，第二次执行时，document.getElementsByTagName('script')[0]可能因为DOM结构变化或脚本加载时序问题，找不到对应的元素，导致firstScriptTag变成undefined，自然无法读取它的parentNode。
2. 全局变量冲突：两次创建播放器都用了同一个全局player变量，后面的实例会直接覆盖前面的，不仅功能失效，还会引发逻辑混乱。

修正后的完整方案 #

第一步：只加载一次YouTube API（全局代码） #

把API加载脚本放在页面头部，只执行一次，不要重复复制：

<script>
// 仅加载一次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);

// 用对象存储多个播放器实例，避免全局变量冲突
var videoPlayers = {};

// API加载完成后初始化所有播放器
function onYouTubeIframeAPIReady() {
  // 第一个视频播放器
  videoPlayers.player1 = new YT.Player('player1', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

  // 第二个视频播放器（替换成你的第二个视频ID）
  videoPlayers.player2 = new YT.Player('player2', {
    height: '360',
    width: '640',
    videoId: 'YOUR_SECOND_VIDEO_ID',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 播放器就绪后的回调（可选）
function onPlayerReady(event) {
  // 如果需要自动播放可以打开下面的注释，但浏览器可能限制自动播放
  // event.target.playVideo();
}

// 播放器状态变化的回调（可选）
function onPlayerStateChange(event) {
  // 比如视频结束后暂停、重置等逻辑
}

// 点击图片触发播放的通用函数
function triggerVideoPlay(playerId) {
  videoPlayers[playerId].playVideo();
}
</script>

第二步：HTML部分（绑定图片和播放器） #

给每个图片添加点击事件，对应不同的播放器容器（可以初始隐藏，点击后再显示）：

<!-- 第一个视频的缩略图，点击触发播放 -->
<img src="你的第一张图片地址.jpg" onclick="triggerVideoPlay('player1')" style="cursor: pointer;" alt="视频1缩略图">
<!-- 第一个播放器容器（初始隐藏，按需显示） -->
<div id="player1" style="display: none;"></div>

<!-- 第二个视频的缩略图 -->
<img src="你的第二张图片地址.jpg" onclick="triggerVideoPlay('player2')" style="cursor: pointer;" alt="视频2缩略图">
<!-- 第二个播放器容器 -->
<div id="player2" style="display: none;"></div>

<!-- 你的关闭按钮 -->
<button class="btn btn-primary" data-dismiss="modal" type="button">
  <i class="fa fa-times"></i> Chiudi
</button>

给新手的额外提示 #

• 打开浏览器开发者工具（按F12），查看Console面板的错误信息，这是定位问题的关键。
• 如果用Bootstrap模态框承载播放器，记得在模态框隐藏时调用videoPlayers[playerId].pauseVideo()，避免视频在后台继续播放声音。
• 尽量避免使用全局变量，用对象或数组管理多个实例，代码会更清晰易维护。

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