Chrome自动播放规则变更后，如何为YouTube API的自动播放iframe获取Play Promise

嘿，刚好碰到过类似的问题，给你分享下怎么搞定Chrome自动播放政策变更后，YouTube嵌入视频的play promise获取问题~

YouTube IFrame API本身并没有像原生HTML5 <video>标签那样直接返回play promise的接口，但我们可以通过监听播放器的事件来手动封装这个功能，完美适配你的需求。

1. 先确保正确初始化YouTube播放器 #

首先得按官方流程加载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() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE', // 替换成你的视频ID
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // 播放器就绪后，给它添加自定义的playPromise方法
  addPlayPromiseMethod(event.target);
}

2. 封装返回Promise的play方法 #

我们给播放器实例加一个playPromise自定义方法，通过监听onPlay和onError事件来完成promise的resolve和reject：

function addPlayPromiseMethod(playerInstance) {
  playerInstance.playPromise = function() {
    return new Promise((resolve, reject) => {
      // 先调用YouTube播放器原生的播放方法
      playerInstance.playVideo();

      // 监听播放成功事件，resolve promise
      const handlePlay = () => {
        resolve();
        // 移除监听避免重复触发
        playerInstance.removeEventListener('onPlay', handlePlay);
      };

      // 监听错误事件，reject promise
      const handleError = (event) => {
        // 错误码18对应浏览器阻止自动播放的场景，这是我们重点关注的
        if (event.data === 18) {
          reject(new Error('Autoplay was prevented by browser policy'));
        } else {
          reject(new Error(`YouTube player error: ${event.data}`));
        }
        // 移除监听
        playerInstance.removeEventListener('onError', handleError);
      };

      playerInstance.addEventListener('onPlay', handlePlay);
      playerInstance.addEventListener('onError', handleError);
    });
  };
}

3. 像原生video那样使用playPromise #

现在你就能和之前操作HTML5 video一样，用promise的方式处理自动播放的结果了：

// 调用自定义的playPromise方法
player.playPromise()
  .then(() => {
    console.log('Autoplay started successfully!');
  })
  .catch(error => {
    console.error('Autoplay failed:', error.message);
  });

小提示 #

• 错误码18是YouTube播放器专门对应“自动播放被浏览器政策阻止”的情况，其他错误码可以参考官方文档做更细致的处理；
• 一定要等播放器初始化完成（也就是onPlayerReady事件触发后）再调用playPromise，不然会报错；
• 浏览器的自动播放政策依然生效，比如带音频的视频还是需要用户先和页面交互过才能自动播放，否则依然会被阻止哦。

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