如何检查 YT.Player 对象是不是已准备好？

Posted 2023-02-24

【中文标题】如何检查 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()”-异常。

【参考方案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()

最好的问候，