第三方网站DOM元素仅审查时生成，自动播放视频脚本遇阻

核心原因 #

这种情况大概率是懒加载+调试工具触发了元素渲染。很多视频网站会采用惰性渲染策略——只有当元素进入「需要被展示/检查」的状态时才会生成对应的DOM节点。而浏览器的审查元素工具在激活时，会强制触发目标区域的DOM渲染（比如为了高亮元素、展示结构），这就导致你打开审查工具后video元素才会被创建。

可行的解决方法 #

• 监听DOM变化：使用MutationObserver监听文档或特定父容器的节点新增事件，一旦检测到video元素插入就执行逻辑：

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.addedNodes.length) {
        const video = document.querySelector('video');
        if (video) {
          // 在这里编写你的自动播放逻辑
          observer.disconnect(); // 找到元素后停止监听，避免重复触发
        }
      }
    });
  });
  
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
  

• 定时轮询（兜底方案）：如果监听DOM变化的方式无效，可通过定时器反复检查元素是否存在：

  const checkVideo = setInterval(() => {
    const video = document.querySelector('video');
    if (video) {
      // 执行你的自动播放逻辑
      clearInterval(checkVideo);
    }
  }, 500); // 每500毫秒检查一次，可根据实际调整间隔
  

• 强制触发布局计算：部分网站的懒加载逻辑会在页面布局更新时触发元素渲染，可通过强制获取页面元素尺寸来触发：

  // 强制触发页面布局计算，可能会唤醒懒加载的video元素
  document.body.offsetHeight;
  

注意事项 #

• 第三方网站的DOM结构和渲染逻辑可能随时变动，脚本要做好容错处理，比如先判断video元素存在再执行操作。
• 避免过于频繁的DOM操作，防止触发网站的反脚本限制。

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