YouTube iframe Player API：onStateChange事件在Chrome中无法触发

核心问题点 #

1. 错误的事件绑定语法（片段1、2）
   YouTube iframe API中，使用addEventListener绑定事件时，事件名应为stateChange（不带on前缀），而非你写的onStateChange。错误的事件名会导致无法监听到状态变化。

2. 未定义变量r引发代码中断（所有片段）
   所有代码片段的onReady回调里都用了未定义的变量r调用setPlaybackQuality，这会直接抛出ReferenceError，中断后续所有代码执行——包括片段1里的事件绑定逻辑，以及片段3里的状态监听逻辑。正确写法是通过事件对象的target属性获取播放器实例：e.target.setPlaybackQuality('small')。

3. 浏览器自动播放政策限制
   你设置了autoplay:1，但现代浏览器要求视频必须在用户交互（如点击页面）后才能自动播放。如果没有用户交互触发播放，视频会一直处于初始状态，onStateChange自然不会触发。

修正后的代码示例 #

基于片段3的正确事件绑定方式，修正变量错误后的代码：

const player = new YT.Player('youtube-player', {
    height: '0',
    width: '0',
    videoId: videoID,
    playerVars: {
      autoplay: 1,
      loop: 0
    },
    events: {
      onReady: function (e) {
        // 用e.target获取当前播放器实例，替换未定义的r
        e.target.setPlaybackQuality('small');
        $('#ytPlayer').fadeIn();
      },
      onStateChange: function (e) {
        console.log('状态变化:', e.data);
        console.log('是否播放结束:', e.data === YT.PlayerState.ENDED, e.data, YT.PlayerState.ENDED);
        if (e.data === YT.PlayerState.ENDED) {
          $('#ytPlayer').remove();
        }
      }
    }
});

额外注意事项 #

• 确保页面中存在id为youtube-player的DOM元素，且API脚本通过官方异步方式加载：

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

// API加载完成后会自动调用此全局函数
window.onYouTubeIframeAPIReady = function() {
  // 在这里初始化播放器
};

• 处理自动播放限制：若需自动播放，必须先让用户完成一次页面交互（如点击按钮），再初始化播放器或调用player.playVideo()。

内容的提问来源于stack exchange，提问作者Сорок два