Javascript YouTube API目标（多个）现有iframe

我试图理解如何使用YouTube API（即不使用脚本构建iframe）来定位现有的iframe

像往常一样，谷歌没有给出足够的API示例，但在这里解释说这是可能的

下面是我尝试做的一个例子-缩略图下面的视频应该播放。我快到了，但只有第一个视频播放

TL；DR:演示：

YT\u ready

、

getFrameID

和

onYouTubePlayerAPIReady

是中定义的函数。这两种方法都可以在没有任何预加载库的情况下实现。在我之前的回答中，我展示了一种为单个帧实现该功能的方法

在这个答案中，我将重点放在多个帧上

HTML示例代码（重要标记和属性大写，

）：

在我之前的回答中，我绑定了

onStateChange

事件。在本例中，我使用了

onReady

事件，因为您只想在初始化时调用函数一次

此示例的工作原理如下：

• 中定义了以下方法

• YouTube框架API是从加载的
• 当这个外部脚本完成加载后，会调用

  onyoutublayerapiready

  ，这反过来会激活使用

  YT\u ready

  定义的所有函数
• 此处显示了以下方法的声明，但使用实现。基于示例的解释：

• 循环遍历每个
  对象，该对象正好位于
  之后
• 在每个帧元素处，检索

  id

  ，并将其存储在

  标识符

  变量中
• iframe的内部ID通过

  getFrameID

  检索。这可确保为API正确格式化
  。在这个示例代码中，返回的ID等于

  标识符

  ，因为我已经将ID附加到

• 当
  存在并且是有效的YouTube视频时，将创建一个新的播放器实例，并将引用存储在

  players

  对象中，可通过键

  frameID

  访问
• 在创建播放器实例时，定义了**

  onReady

  *事件。当为帧完全初始化API时，将调用此方法

• createyEvent

  
  此方法返回一个动态创建的函数，该函数为单独的播放器添加功能。守则最相关的部分包括：

  function createYTEvent(frameID, identifier) {
      return function (event) {
          var player = players[frameID]; // Set player reference
          ...
                  player.playVideo();
      }
  }
  

  • frameID

    是框架的ID，用于启用YouTube框架API

  • 标识符

    是在

    YT\u ready

    中定义的ID，不一定是
    元素

    getFrameID

    将尝试为给定id查找最接近的匹配帧。也就是说，它返回给定
    元素的id，或者：如果给定元素不是
    ，函数将查找一个子元素
    ，并返回此帧的id。如果帧不存在，函数将通过

    -frame

    后缀给定ID
  • players[playerID]`指初始化的播放器实例

确保您也进行了检查，因为此答案的核心功能就是基于此。

---

。在这些回答中，我展示了YouTube Frame/JavaScript API的各种实现。

演示您的问题。我现在得走了，所以我在接下来的几个小时内无法回复。谢谢Rob，你的编码给我留下了深刻的印象！顺便问一下，为什么在视频前绝对定位图像是一种安全措施？好奇。@SparrwHawk One可以在第三方框架前放置（部分）透明的元素/图像，并欺骗用户共享不需要的信息。这是一个巨大的潜在安全问题。好吧，这很公平，但在搜索引擎优化等方面没有惩罚。尽管如此？这只是一种道德考虑，对吗？@SparrwHawk大多数现代浏览器都不允许（部分）不可见元素重叠框架。这不是对搜索引擎优化或道德的惩罚，而是对可访问性的惩罚。该按钮将永远无法单击，因为iframe位于其上方。但是：在答案处查看+演示。哇，好吧，我想我已经找到了解决问题的方法，但是对于一个简单的API来说似乎非常复杂-

var players = {}; //Define a player storage object, to expose methods,
                  //  without having to create a new class instance again.
YT_ready(function() {
    $(".thumb + iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onReady": createYTEvent(frameID, identifier)
                }
            });
        }
    });
});

// Returns a function to enable multiple events
function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // Set player reference
        var the_div = $('#'+identifier).parent();
        the_div.children('.thumb').click(function() {
            var $this = $(this);
            $this.fadeOut().next().addClass('play');
            if ($this.next().hasClass('play')) {
                player.playVideo();
            }
        });
    }
}

function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // Set player reference
        ...
                player.playVideo();
    }
}