YouTube API 目标（多个）现有 iframe

Question

我正在尝试了解如何使用 YouTube API 定位现有 iframe（即不使用脚本构建 iframe）。

像往常一样，谷歌没有给出足够多的 API 示例，但解释说这是可能的，这里http://code.google.com/apis/youtube/iframe_api_reference.html

这是我正在尝试做的一个示例 - 缩略图下方的视频应该播放。我快到了，但只有第一个视频播放...

http://jsfiddle.net/SparrwHawk/KtbYR/2/

Answer 1

TL;DR：演示：http://jsfiddle.net/KtbYR/5/

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

在这个答案中，我关注多个帧。

HTML示例代码（重要标签和属性大写，<iframe src id>）：

<div>
  <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
  <IFRAME ID="frame1" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>
<div>
  <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
  <IFRAME ID="frame2" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>

JavaScript 代码（YT_ready、getFrameID、onYouTubePlayerAPIReady 和 YouTube Frame API 脚本加载器定义为 here）

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();
            }
        });
    }
}

在我之前的回答中，我绑定了onStateChange 事件。在此示例中，我使用了onReady 事件，因为您只想在初始化时调用函数一次。

这个例子的工作原理如下：

• this answer中定义了以下方法。

  1. YouTube Frame API 是从 http://youtube.com/player_api 加载的。
  2. 当这个外部脚本完成加载时，onYoutubePlayerAPIReady 被调用，这反过来又激活了使用YT_ready 定义的所有函数

• 此处显示了以下方法的声明，但使用this answer 实现。基于例子的解释：

  1. 循环遍历每个<iframe id> 对象，该对象位于<.. class="thumb"> 之后。
  2. 在每个框架元素中，都会检索 id，并将其存储在 identifier 变量中。
  3. iframe 的内部 ID 通过getFrameID 检索。这可确保为 API 正确格式化 <iframe>。 在这个示例代码中，返回的 ID 等于 identifier，因为我已经将一个 ID 附加到了 <iframe>。
  4. 当<iframe> 存在且YouTube 视频有效时，将创建一个新的播放器实例，并将引用存储在players 对象中，可通过键frameID 访问。
  5. 在创建播放器实例时，定义了一个**onReady* 事件。当框架的 API 完全初始化时，将调用此方法。

  6. createYTEvent
     此方法返回一个动态创建的函数，该函数为单独的播放器添加了功能。代码中最相关的部分是：

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

     • frameID 是框架的 ID，用于启用 YouTube 框架 API。
     • identifier 是 YT_ready 中定义的 ID，不一定是 <iframe> 元素。 getFrameID 将尝试为给定的 id 找到最接近的匹配帧。也就是说，它返回给定的<iframe> 元素的ID，或者： 如果给定的元素不是<iframe>，则该函数寻找一个<iframe> 的子元素，并返回该帧的ID。如果框架不存在，该函数会将给定 ID 后缀为-frame。
     • players[playerID]` 指的是初始化的播放器实例。

确保您也检查this answer，因为这个答案的核心功能就是基于此。

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