YouTube IFrame API调用player.playVideo()无效，无法实现视频自动播放如何解决

问题原因 #

• 主流浏览器均执行了媒体自动播放限制政策：带音频的媒体内容无法在无用户交互的页面中自动触发播放，你的代码中播放器初始化时音量为65，浏览器直接拦截了自动播放请求，哪怕你设置了autoplay=1和定时器调用playVideo()都会失效。
• YouTube Iframe API的自动播放逻辑受浏览器策略约束，单独设置autoplay参数无法绕过浏览器层面的限制。

可行解决方案 #

方案1：静音自动播放（无需任何用户交互） #

这是唯一能实现完全无用户点击自动播放的方案，你可以选择播放成功后再动态恢复音量（部分浏览器允许播放后调整音量，部分高版本浏览器仍会拦截音量调整操作，需要用户交互）。
修改要点：

1. 在playerVars参数中新增mute: 1配置，初始化播放器时默认静音
2. 移除不必要的轮询定时器，onReady回调中直接调用playVideo()即可
   修改后代码如下：

<html>
  <body>
    <div id="player"></div>
    <br/>
    <button id="botaoPlay" onclick="playMusic()">play</button>
 <script>
      
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() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '8t3EHHhkC34',
    // 新增mute=1参数
    playerVars: { autoplay: 1 , enablejsapi: 1, playsinline: 1, origin: 'http://localhost', mute: 1 },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}

function onPlayerReady(event) {
    // 播放成功后可尝试恢复音量，如被拦截可引导用户点击页面任意位置恢复音量
    event.target.setVolume(65);
    event.target.playVideo();
}

function playMusic() {
    if (player) {
        player.playVideo();
    }
}

function onPlayerStateChange(event) {
   console.log("status changed: " + player.getPlayerState());
}
</script>
  </body>
</html>

方案2：监听页面首次用户交互触发带声播放（无需专门点击播放按钮） #

如果需要保留声音自动播放，可监听页面任意用户交互（点击、触摸、键盘输入等），触发后调用playVideo()，只要用户和页面有过任意交互就能自动播放，不需要专门点击播放按钮：
在原有代码基础上添加以下逻辑即可：

// 监听页面首次用户交互
document.addEventListener('click', function autoPlayOnUserInteraction() {
  if (player && player.getPlayerState() !== 1) {
    player.playVideo();
  }
  // 只触发一次，移除监听
  document.removeEventListener('click', autoPlayOnUserInteraction);
}, { once: true });

注意事项 #

• 本地测试时origin配置为http://localhost即可正常使用，上线后需要将origin值替换为你的实际部署域名
• 移动端自动播放必须保留playsinline=1参数，否则会强制拉起全屏播放器，无法自动播放

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