如何在页面加载时让YouTube播放器失去焦点？

你猜的没错——YouTube播放器的焦点设置确实是在异步流程里完成的，这也是你直接在页面加载事件里调用blur()无效的核心原因。播放器的初始化、DOM渲染都是延迟执行的，常规的DOMContentLoaded或window.load触发时，播放器可能还没准备好，更别说获取焦点了。

下面给你几个可行的自动失焦方案：

这种方法能实时监听DOM变化，一旦播放器核心元素出现并获取焦点，就立即执行失焦操作，不会浪费资源。

// 目标选择器：根据YouTube播放器的实际DOM结构调整，以下是常见的选择器
const playerSelectors = '.html5-video-player, ytd-player';
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      const activeElement = document.activeElement;
      // 检查当前焦点元素是否属于播放器
      if (activeElement && activeElement.matches(playerSelectors)) {
        activeElement.blur();
        observer.disconnect(); // 完成操作后停止监听，避免重复执行
      }
    }
  });
});

// 开始监听整个body的DOM变化（包括深层子节点）
observer.observe(document.body, {
  childList: true,
  subtree: true
});

如果觉得MutationObserver有点复杂，轮询是个快速落地的方案——每隔一段时间检查一次播放器是否已获取焦点，满足条件就执行失焦并停止轮询。

const checkPlayerFocus = () => {
  const activeEl = document.activeElement;
  // 判断当前焦点是否在播放器相关元素上
  if (activeEl && (activeEl.classList.contains('html5-video-player') || activeEl.tagName === 'YTD-PLAYER')) {
    activeEl.blur();
    clearInterval(pollTimer); // 停止轮询
  }
};

// 每隔200ms检查一次，可根据页面加载速度调整间隔
const pollTimer = setInterval(checkPlayerFocus, 200);

• YouTube的DOM结构和类名可能会不定期更新，如果某个选择器失效，记得打开浏览器开发者工具查看最新的播放器元素标识。
• 部分浏览器对无用户交互的焦点修改有安全限制，如果自动失焦无效，可以尝试把逻辑绑定到页面首次用户交互事件（比如第一个点击事件）上，但在你自己可控的页面中，直接执行通常没问题。

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