YouTube API目标（多个）现有iframe

Question

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

像往常一样，Google没有提供足够的API示例，但解释说这是可能的，http://code.google.com/apis/youtube/iframe_api_reference.html

以下是我正在尝试做的一个示例 - 缩略图下面的视频应播放。我几乎在那里，但只有第一个视频播放...

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

Answer 1

TL; DR：DEMO：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. 通过getFrameID检索iframe的内部ID。这可确保<iframe>已正确格式化为API。 在此示例代码中，返回的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 Frame API 。
     • identifier是YT_ready中定义的ID，不一定是<iframe>元素。 getFrameID将尝试为给定的ID找到最接近的匹配帧。也就是说，它返回给定<iframe>元素的ID，或者：如果给定元素不是<iframe>，则该函数查找一个<iframe>的子元素，并返回该帧的ID。如果框架不存在，则该函数将按-frame。{/ li>对给定ID进行后缀
     • players [playerID]`指的是初始化的玩家实例。

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

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