javascript - 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

长话短说:演示: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();
            }
        });
    }
}

在我之前的回答中，我绑定(bind)了 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 ，因为我已经为 <iframe> 添加了一个 ID .
  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> 的 child , 并返回该帧的 ID。如果框架不存在，该函数将在给定 ID 后缀 -frame .
     • players[playerID]` 指的是初始化的播放器实例。

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

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