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:DEMO: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,onYouTubePlayerAPIReady和YouTube的框架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的框架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对象中,可通过键访问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.
     • players [playerID]`指的是初始化的玩家实例.

请确保您也检查此答案,因为此答案的核心功能是基于此.

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