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/< /a>

Answer 1

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

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

在这个答案中，我重点关注多个框架。

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

<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 脚本加载器定义为 此处）

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. 循环遍历每个

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

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