Safari 11下YouTube自动播放异常问题求助

你碰到的是Safari 11特有的两个问题叠加导致的异常：它严格的自动播放限制，加上代码里onStateChange事件处理逻辑引发的无限循环，最终触发了服务器的413错误（大概率是频繁触发播放请求导致的异常请求量过载）。

问题根源拆解 #

• onStateChange的无限循环：你在onPlayerStateChange里无条件调用event.target.playVideo()，而每次调用playVideo()都会触发播放器状态变化，进而再次调用onPlayerStateChange，形成死循环。这会让播放器不断向服务器发送请求，最终触发413错误。
• Safari 11的自动播放限制：Safari 11默认禁止无用户交互的自动播放，只有静音视频或者用户主动点击页面后，才允许播放视频——这就是为什么你点击页面后视频能正常工作的原因，点击动作触发了用户交互，解除了播放限制。

修复方案 #

针对这两个问题，我们可以做以下修改：

1. 修复onStateChange的循环逻辑

移除onStateChange里无条件的playVideo()调用，只在需要的状态下执行操作（比如你原本注释的“播放6秒后停止”逻辑）。

2. 适配Safari 11的自动播放限制

采用静音自动播放的方式（Safari允许静音视频自动播放），之后再根据需求恢复音量，既满足自动播放需求，又绕过浏览器限制。

修改后的完整代码 #

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;
var done = false; // 标记是否已执行过播放停止逻辑，避免重复触发

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'ID-HERE',
    playerVars: {
      'autoplay': 1, // 开启自动播放
      'controls': 0,
      'mute': 1 // 先静音，适配Safari自动播放限制
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  // Safari 11下静音状态可自动播放
  event.target.playVideo();
  $('#player').delay(1200).fadeIn();
  
  // 可选：播放后恢复音量（如果需要有声播放）
  setTimeout(() => {
    event.target.unMute();
  }, 500);
}

function onPlayerStateChange(event) {
  // 仅在第一次进入播放状态时执行逻辑，避免循环
  if (event.data == YT.PlayerState.PLAYING && !done) {
    console.log('视频开始播放');
    // 6秒后停止视频，还原你原本的需求
    setTimeout(() => {
      event.target.stopVideo();
      console.log('视频已停止');
    }, 6000);
    done = true; // 标记已执行，防止重复触发
  }
}

额外说明 #

• 如果你的需求不需要停止视频，可以直接简化甚至移除onStateChange事件绑定，进一步减少不必要的触发；
• 静音自动播放是Safari 11兼容自动播放的最优方案，既满足业务需求，又符合浏览器的安全限制。

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