javascript - 嵌入 youtube 播放器时收听

Question

有没有办法知道 youtube 播放器何时成功嵌入？我正在使用 iframe 嵌入，我想在播放器加载后执行一些操作。

Answer 1

我假设您正在谈论包括 iFrame 嵌入代码本身，而不是使用 javascript 嵌入它？ (无论哪种方式，都没有太大的不同。)为此，您需要使用 YouTube iFrame javascript 库，以便您可以绑定(bind)到 iFrame 并了解其状态。

要加载库，请使用以下代码:

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

当 iFrame javascript 库成功注入(inject)后，它将调用 onYouTubeIframeAPIReady，因此如果您定义了该函数，您就可以知道 iFrame 绑定(bind)支持何时准备就绪。然后，在该函数中，您需要为 iframe 设置一个 YT.Player 对象:

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', { // the first argument is the id of your iframe
      events: {
        'onReady': onPlayerReady
      }
    });
  }

onReady 回调绑定(bind)到此处名为 onPlayerReady 的函数，因此最后一步就是定义该函数:

function onPlayerReady() {
     alert('iframe is embedded and player is loaded!');
}

这是 jsfiddle展示。