如何自动播放嵌入的YouTube直播？常规方案及自动点击均失效

我看到你尝试用代码自动点击嵌入直播的播放按钮，但类选择器返回了undefined，这其实是选择器写法的问题，再加上直播元素可能延迟加载的情况，我来帮你一步步解决：

1. 修正类选择器的写法 #

你原来的选择器 .ytp-large-play-button ytp-button 是后代选择器，它会查找拥有ytp-large-play-button类的元素内部的ytp-button元素，但实际播放按钮是同时拥有这两个类的单个元素，正确的多类选择器应该用点连接两个类名：

<script>
  var els = document.querySelectorAll(".ytp-large-play-button.ytp-button");
  [].forEach.call(els, function(el) {
    el.click();
  });
</script>

2. 处理元素延迟加载的情况 #

嵌入的YouTube直播可能不会在页面加载完成后立即渲染播放按钮，直接执行代码可能找不到元素。可以用延迟重试的方式确保元素加载完成：

<script>
  function triggerPlay() {
    const playBtn = document.querySelector(".ytp-large-play-button.ytp-button");
    if (playBtn) {
      playBtn.click();
      console.log("直播已自动播放");
      return;
    }
    // 每500毫秒重试一次，直到找到按钮
    setTimeout(triggerPlay, 500);
  }

  // 页面DOM加载完成后开始执行
  document.addEventListener("DOMContentLoaded", triggerPlay);
</script>

3. 更可靠的方案：使用YouTube Iframe API #

如果你的直播是通过iframe嵌入的，直接操作DOM元素可能会因为YouTube的类名变更或跨域问题失效，官方的Iframe API是更稳定的选择：

// 加载YouTube Iframe API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  // 替换成你的iframe的ID
  player = new YT.Player('your-iframe-id', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // 触发自动播放
  event.target.playVideo();
}

这个方案不需要依赖DOM类名，是官方支持的自动播放方式，兼容性和稳定性更好。

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