YouTube API目标（多个）现有iframe [英] YouTube API Target (multiple) existing iframe(s)

问题描述

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

I'm trying to understand how to target an existing iframe using the YouTube API (i.e. without constructing an iframe with the script).

像往常一样，Google确实如此没有给出足够的API示例，但解释说可以，这里有 http://code.google.com/apis/ youtube / iframe_api_reference.html

As usual, Google does not give enough API examples, but explains that it IS possible, here http://code.google.com/apis/youtube/iframe_api_reference.html

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

Here is an example of what I'm trying to do - the video underneath the thumbnail should play. I am almost there, but only the first video plays...

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

推荐答案

TL; DR：DEMO：< a href =http://jsfiddle.net/KtbYR/5/ =nofollow noreferrer> http://jsfiddle.net/KtbYR/5/

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

TL;DR: DEMO: http://jsfiddle.net/KtbYR/5/

YT_ready, getFrameID and onYouTubePlayerAPIReady are functions as defined in this answer. Both methods can be implemented without any preloaded library. In my previous answer, I showed a method to implement the feature for a single frame.

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

In this answer, I focus on multiple frames.

HTML示例代码（重要标签和属性大写，< iframe src id> ）：

HTML example code (important tags and attributes are capitalized, <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 脚本加载程序已定义其他）

JavaScript code (YT_ready, getFrameID, onYouTubePlayerAPIReady and the YouTube Frame API script loader are defined 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 事件，因为你想在初始化时只调用一次函数。

In my previous answer, I bound the onStateChange event. In this example, I used the onReady event, because you want to call the functions only once, at initialization.

此示例的工作原理如下：

This example works as follows:

• 以下方法在这个答案。

1. YouTube Frame API 是从 http://youtube.com/player_api 加载的。


2. 当此外部脚本加载完毕后，将调用 onYoutubePlayerAPIReady ，然后激活所有使用<$ c定义的函数$ c> YT_ready

1. The YouTube Frame API is loaded from http://youtube.com/player_api.
2. When this external script has finished loading, onYoutubePlayerAPIReady is called, which in his turn activates all functions as defined using YT_ready

此处显示了以下方法的声明，但是使用了此答案。基于示例的说明：

1. 遍历每个< iframe id> 对象，它位于< .. class =thumb> 之后。


2. 在每个框架元素处，<$检索c $ c> id ，并将其存储在标识符变量中。


3. 内部ID通过 getFrameID 检索iframe。这可确保为API正确格式化< iframe> 。 在此示例代码中，返回的ID等于 identifier ，因为我已将ID附加到< iframe> 。


4. 当< iframe> 存在时，以及有效的YouTube视频，新的创建了播放器实例，并且引用存储在播放器对象中，可通过键 frameID 访问。


5. 在创建播放器实例时，定义了** onReady *事件。当API完全初始化为框架时，将调用此方法。



6. createYTEvent
   
   此方法返回一个动态创建的函数，该函数为单独的玩家添加功能。代码中最相关的部分是：

1. Loops through each <iframe id> object, which is placed right after <.. class="thumb">.
2. At each frame element, the id is retrieved, and stored in the identifier variable.
3. The internal ID of the iframe is retrieved through getFrameID. This ensures that the <iframe> is properly formatted for the API. In this example code, the returned ID is equal to identifier, because I have already attached an ID to the <iframe>.
4. When the <iframe> exists, and a valid YouTube video, a new player instance is created, and the reference is stored in the players object, accessible by key frameID.
5. At the creation of the player instance, a **onReady* event is defined. This method will be invoked when the API is fully initialized for the frame.

6. createYTEvent
   This method returns a dynamically created function, which adds functionality for separate players. The most relevant parts of the code are:

function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // Set player reference
        ...
                player.playVideo();
    }
}

• frameID 是框架的ID，用于启用 YouTube Frame API 。


• 标识符是 YT_ready 中定义的ID，不一定是< iframe> 元素。 getFrameID 将尝试为给定的ID找到最接近的匹配帧。也就是说，它返回给定< iframe> 元素的ID，或者：如果给定元素不是< iframe> ，该函数会查找一个< iframe> 的子项，并返回此帧的ID。如果框架不存在，该函数将通过 -frame 后缀给定ID。


• 玩家[playerID]`指的是初始化的播放器实例。


• frameID is the ID of the frame, used to enable the YouTube Frame API.
• identifier is the ID as defined in YT_ready, not necessarily an <iframe> element. getFrameID will attempt to find the closest matching frame for a given id. That is, it returns the ID of a given <iframe> element, or: If the given element is not an <iframe>, the function looks for a child which is a <iframe>, and returns the ID of this frame. If the frame does not exists, the function will postfix the given ID by -frame.
• players[playerID]` refers to the initialized player instance.




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

Other YouTube Frame API answers. In these answers, I showed various implementations of the YouTube Frame/JavaScript API.

这篇关于YouTube API目标（多个）现有iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！