如何检测YouTube iframe嵌入播放器控制栏各功能按钮的点击事件

各操作检测可行性说明 #

• 静音/取消静音操作：可实现
  借助YouTube Iframe API原生提供的onVolumeChange事件实现，该事件会在用户点击扬声器图标、调整音量滑块时触发，你可以在回调中调用player.isMuted()方法判断当前是否为静音状态，即可区分静音/取消静音操作。
• 全屏按钮点击操作：可间接实现
  YouTube API未开放对应原生点击事件，但可以通过监听浏览器全局全屏状态变化事件实现，需兼容不同浏览器前缀的事件名：fullscreenchange、webkitfullscreenchange、mozfullscreenchange、MSFullscreenChange，触发时判断当前全屏元素是否为你嵌入的YouTube iframe即可判定是否为用户点击了播放器的全屏按钮。
• 「前往YouTube」按钮点击操作：无法实现
  该按钮属于YouTube iframe内部的跨域DOM元素，官方API未开放对应的事件回调，受浏览器跨域安全策略限制，你无法直接访问iframe内部DOM绑定自定义事件，因此没有合规的实现方案。

示例代码参考 #

let player;
// YouTube API就绪后初始化播放器
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player-container', {
    height: '360',
    width: '640',
    videoId: '替换为你的视频ID',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onVolumeChange': onVolumeChange // 绑定音量变化事件
    }
  });
}

// 音量变化回调，捕获静音/取消静音操作
function onVolumeChange(event) {
  const isMuted = player.isMuted();
  const volume = player.getVolume();
  if (isMuted) {
    console.log('用户点击了静音按钮');
  } else if (volume > 0) {
    console.log('用户取消了静音');
  }
}

// 监听全屏变化事件，捕获全屏操作
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(evt => {
  document.addEventListener(evt, () => {
    const fullEl = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
    // 判断全屏元素是不是你的YouTube iframe
    if (fullEl && fullEl.id === 'player-container') {
      if (document.fullscreenElement) {
        console.log('用户进入了全屏');
      } else {
        console.log('用户退出了全屏');
      }
    }
  });
});

内容的提问来源于stack exchange，提问作者José L.