使用YouTube IFrame API切换视频ID后无法更新视频的问题咨询

你当前的代码首次加载视频正常，但不刷新页面调用loadAPIPls传入新视频ID时，视频不会更新。问题根源在于两点：

• 每次调用loadAPIPls都会重复注入YouTube API脚本，而API加载完成后window.onYouTubeIframeAPIReady仅会触发一次
• 没有复用已创建的播放器实例，反而尝试重复创建，导致新的视频切换逻辑无法生效

修改后的代码实现 #

// 全局变量保存播放器实例，避免重复创建
let player = null;

// 初始化加载第一个视频
loadAPIPls('WQBUy6t3f0U');

function loadAPIPls(idYTB) {
  // 先检查YouTube API是否已经加载完成
  if (typeof YT === 'undefined') {
    loadYouTubeAPI();
    // API加载完成后创建播放器
    window.onYouTubeIframeAPIReady = function() {
      createYouTubePlayer(idYTB);
    }
  } else {
    // API已加载，直接处理视频切换逻辑
    if (player) {
      // 已有播放器实例，调用官方方法切换视频
      player.loadVideoById(idYTB);
    } else {
      // 特殊情况：API加载了但播放器未创建，重新初始化
      createYouTubePlayer(idYTB);
    }
  }
}

function loadYouTubeAPI() {
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

function createYouTubePlayer(id) {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: id,
    events: {
      'onReady': onPlayerReady,
    }
  });
}

// 保留你的播放器就绪逻辑（如果有需要）
function onPlayerReady(event) {
  // 示例：自动播放视频
  // event.target.playVideo();
}

<div id="player"></div>

关键改动说明 #

• 新增全局player变量存储播放器实例，避免重复初始化播放器
• 在loadAPIPls中先判断API状态：未加载时才注入脚本，已加载则直接复用实例切换视频
• 使用YouTube API官方提供的loadVideoById方法，这是切换已加载播放器视频内容的标准方式

这样修改后，无论首次加载还是后续调用loadAPIPls传入新ID，都能正常切换显示的视频。

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