如何用JavaScript检测YouTube广告是否正在播放

云原生阿岚

2026-6-21

YouTube广告播放检测问题修复方案

原代码的核心问题

仅依赖DOM类名检测，YouTube会频繁更新页面结构，导致选择器失效
只在PLAYING状态触发检测，广告加载初期（比如缓冲阶段）可能错过检测时机
未处理视频播放中途插播广告的场景

更可靠的API检测方案

利用YouTube IFrame Player API自带的getAdState()方法，这比DOM选择器稳定得多：

function onPlayerStateChange(event) {
  const player = event.target;
  // 覆盖广告可能出现的所有状态：播放、缓冲、暂停
  const relevantStates = [YT.PlayerState.PLAYING, YT.PlayerState.BUFFERING, YT.PlayerState.PAUSED];
  
  if (relevantStates.includes(event.data)) {
    const adState = player.getAdState();
    // 广告状态码：1=播放中，2=缓冲中，3=暂停
    if ([1, 2, 3].includes(adState)) {
      YouTubeAdChannel.postMessage('ad_playing');
    }
  }
}

DOM备选方案（API失效时用）

如果getAdState()不可用，改用覆盖更多场景的DOM选择器（注意后续可能需随YouTube页面更新调整）：

function isAdPlaying() {
  // 检测当前常见的广告容器类名
  return !!document.querySelector(
    '.ytp-ad-module, .ytp-ad-player-overlay-instream-info, .video-ads .ytp-ad-progress-list'
  );
}

function onPlayerStateChange(event) {
  if ([YT.PlayerState.PLAYING, YT.PlayerState.BUFFERING].includes(event.data)) {
    // 延迟检测，确保广告DOM已生成
    setTimeout(() => {
      if (isAdPlaying()) {
        YouTubeAdChannel.postMessage('ad_playing');
      }
    }, 500);
  }
}