如何检查 YT.Player 对象是否已准备好？答案

【问题标题】：How to check if YT.Player Object has been readied?如何检查 YT.Player 对象是否已准备好？
【发布时间】：2014-06-30 01:49:22
【问题描述】：

在同一页面的不同元素上创建了多个 YT.player 对象。

 player1 = new YT.Player( 'player-1' , {...
 player2 = new YT.Player( 'player-2' , {...
 player3 = new YT.Player( 'player-3' , {...

某些 div 的可见性可以通过 Javascript 进行更改。在某些浏览器（例如 IE 11）上，Youtube Iframe API 的 onPlayerReady 回调只有在 DIV 变得可见时才会被调用。

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

是否有一些构建检查以查看 YT.player 对象是否已准备好？

换句话说，我可以在播放器 1、播放器 2、播放器 3 调用例如 stopVideo 之前检查它们吗？因为如果我打电话

player-3.stopVideo()

并且 player-3 没有收到 onPlayerReady 事件，我得到一个“未知方法 stopVideo()”-异常。

【问题讨论】：

标签： javascript youtube youtube-api youtube-javascript-api

【解决方案1】：

我通过创建这样的队列解决了这个问题：

// Create a queue for anything that needs the YT iFrame API to run
window.YTQueue = {
  hasRun: false,
  queuedItems: [],
  run() {
    this.queuedItems.forEach(item => item());
    this.queuedItems = [];
    this.hasRun = true;
  },
  queueItem(item) {
    this.hasRun ? item() : this.queuedItems.push(item);
  },
};

// Asynchronously load YouTube 'iFrame Player API'
const YouTubeScriptTag = document.createElement('script');
YouTubeScriptTag.src = 'https://www.youtube.com/iframe_api';
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(YouTubeScriptTag, firstScriptTag);

// Called by YouTube API when it's loaded
window.onYouTubeIframeAPIReady() => window.YTQueue.run();

现在您可以将 YouTube iFrame API 相关代码添加到队列中，如下所示：

window.YTQueue.queueItem(() => console.log(window.YT));

从window.YTQueue.queueItem() 方法中可以看出，当您将函数传递给它时，它要么立即运行它（如果 YT API 已加载并准备就绪），要么将传递的函数排队直到它运行为止。

希望这会有所帮助。

【讨论】：

【解决方案2】：

我对这个问题没有完美的解决方案。似乎可行的是检查这是否是一个函数

if ( typeof player-3.stopVideo === 'function' ) {
    player-3.stopVideo()
}

最好的问候，

【讨论】：