17

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

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

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

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

4

1 回答 1

37

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

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

在这个答案中，我专注于多个框架。

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和YouTube Frame API脚本加载器在onYouTubePlayerAPIReady此处定义）

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事件，因为您只想在初始化时调用函数一次。

此示例的工作原理如下：

  • 此答案中定义了以下方法。

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

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

    1. 循环遍历<iframe id>放置在 . 之后的每个对象<.. class="thumb">。
    2. 在每个框架元素id处，检索并存储在identifier变量中。
    3. iframe 的内部 ID 通过 检索getFrameID。这可确保<iframe>为 API 正确格式化。在此示例代码中，返回的 ID 等于identifier，因为我已经将 ID 附加到<iframe>.
    4. 当<iframe>存在且有效的 YouTube 视频时，将创建一个新的播放器实例，并将引用存储在players对象中，可通过 key 访问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是 中定义的 ID YT_ready，不一定是<iframe>元素。getFrameID将尝试为给定的 id 找到最接近的匹配帧。也就是说，它返回给定<iframe>元素的 ID，或者： 如果给定元素不是 a <iframe>，则该函数查找一个是 a 的子元素<iframe>，并返回此帧的 ID。如果框架不存在，该函数将给定 ID 后缀-frame.
      • player[playerID]` 指的是初始化的播放器实例。

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

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

于 2012-01-21T00:27:14.133 回答