YouTube API 目标(多个)现有 iframe-前端问题

YouTube API Target (multiple) existing iframe(s)(YouTube API 目标(多个)现有 iframe)

本文介绍了YouTube API 目标(多个)现有 iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试了解如何使用 YouTube API 定位现有 iframe(即不使用脚本构建 iframe).

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

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

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

解决方案

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

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

在这个答案中，我关注多个帧.

HTML示例代码(重要标签和属性大写，<iframe src id>):

<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><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 player = {};//定义一个播放器存储对象，公开方法，//无需再次创建新的类实例.YT_ready(函数() {$(".thumb + iframe[id]").each(function() {var 标识符 = this.id;var frameID = getFrameID(标识符);if (frameID) {//如果框架存在玩家[frameID] = new YT.Player(frameID, {事件:{"onReady": createYTEvent(frameID, 标识符)}});}});});//返回一个启用多个事件的函数函数 createYTEvent(frameID, 标识符) {返回函数(事件){var player = 玩家 [frameID];//设置播放器参考var the_div = $('#'+标识符).parent();the_div.children('.thumb').click(function() {var $this = $(this);$this.fadeOut().next().addClass('play');if ($this.next().hasClass('play')) {播放器.playVideo();}});}}
在我之前的回答中，我绑定了 onStateChange 事件.在此示例中，我使用了 onReady 事件，因为您只想在初始化时调用函数一次.
这个例子的工作原理如下:
this answer.
YouTube Frame API 是从 http://youtube.com/player_api.
当这个外部脚本完成加载后，onYoutubePlayerAPIReady 被调用，这反过来又激活了使用 YT_ready
定义的所有函数
此处显示了以下方法的声明，但使用这个答案.基于例子的解释:
循环遍历每个 <iframe id> 对象，该对象位于 <..class="thumb"> 之后.
在每个框架元素处，检索 id，并将其存储在 identifier 变量中.
通过getFrameID 获取iframe 的内部ID.这可确保为 API 正确格式化 <iframe>.在这个示例代码中，返回的 ID 等于 identifier，因为我已经为 </code> 附加了一个 ID.</em></em>李><li>当 <code><iframe></code> 存在且有效的 YouTube 视频时，将创建一个新的播放器实例，并将引用存储在 <code>players</code> 对象中，可通过以下方式访问关键 <code>frameID</code>.</li><li>在创建播放器实例时，会定义一个 **<code>onReady</code>* 事件.当框架的 API 完全初始化时，将调用此方法.</li><li><p><strong><code>createYTEvent</code></strong><br/>此方法返回一个动态创建的函数，该函数为单独的播放器添加了功能.代码中最相关的部分是:</p><pre><code class='language-html'>function createYTEvent(frameID, identifier) {返回函数(事件){var player = 玩家 [frameID];//设置播放器参考...播放器.playVideo();}}</code></pre><p><ul><li><code>frameID</code> 是框架的 ID，用于启用 <em>YouTube Frame API</em>.</li><li><code>identifier</code> 是 <code>YT_ready</code> 中定义的 ID，不一定是 <code><iframe></code> 元素.<code>getFrameID</code> 将尝试为给定的 id 找到最接近的匹配帧.也就是说，它返回给定 <code><iframe></code> 元素的 ID，或者: 如果给定元素不是 <code><iframe></code>，则函数查找子元素这是一个<code><iframe></code>，并返回此帧的ID.如果框架不存在，该函数将通过 <code>-frame</code> 对给定 ID 进行后缀.</li><li>players[playerID]` 指的是初始化的播放器实例.</li></ul></li></ol><p></li></ul><h2>确保您<em>也</em>检查这个答案，因为这个答案的核心功能就是基于这个.</h2><p>其他 YouTube Frame API 答案.在这些答案中，我展示了 YouTube Frame/JavaScript API 的各种实现.</p><p>I'm trying to understand how to target an existing iframe using the YouTube API (i.e. without constructing an iframe with the script).</p> <p>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</p> <p>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...</p> <p>http://jsfiddle.net/SparrwHawk/KtbYR/2/</p><div class="h2_lin"> 解决方案 </div><p><h2>TL;DR: DEMO: http://jsfiddle.net/KtbYR/5/</h2> <p><code>YT_ready</code>, <code>getFrameID</code> and <code>onYouTubePlayerAPIReady</code> are functions as defined in <strong>this answer</strong>. 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.</p> <p>In this answer, I focus on multiple frames.</p> <p><strong>HTML example code</strong> (important tags and attributes are capitalized, <code><iframe src id></code>):</p><pre><code class='language-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> </code></pre><p><strong>JavaScript code (<code>YT_ready</code>, <code>getFrameID</code>, <code>onYouTubePlayerAPIReady</code> and the <em>YouTube Frame API</em> script loader are defined here)</strong></p><pre><code class='language-html'>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(); } }); } } </code></pre><p>In my previous answer, I bound the <code>onStateChange</code> event. In this example, I used the <code>onReady</code> event, because you want to call the functions only once, at initialization.</p> <p>This example works as follows:</p> <ul> <li><p>The following methods are defined in this answer.</p><ol> <li>The <em>YouTube Frame API</em> is loaded from http://youtube.com/player_api.</li> <li>When this external script has finished loading, <code>onYoutubePlayerAPIReady</code> is called, which in his turn activates all functions as defined using <code>YT_ready</code></li> </ol><p></li> <li><p>The declaration of the following methods are shown here, but implemented using this answer. Explanation based on the example:</p><ol> <li>Loops through each <code><iframe id></code> object, which is placed right after <code><.. class="thumb"></code>.</li> <li>At each frame element, the <code>id</code> is retrieved, and stored in the <code>identifier</code> variable.</li> <li>The internal ID of the iframe is retrieved through <code>getFrameID</code>. This ensures that the <code><iframe></code> is properly formatted for the API. <em>In this example code, the returned ID is equal to <code>identifier</code>, because I have already attached an ID to the <code><iframe></code>.</em></li> <li>When the <code><iframe></code> exists, and a valid YouTube video, a new player instance is created, and the reference is stored in the <code>players</code> object, accessible by key <code>frameID</code>.</li> <li>At the creation of the player instance, a **<code>onReady</code>* event is defined. This method will be invoked when the API is fully initialized for the frame.</li> <li><p><strong><code>createYTEvent</code></strong><br /> This method returns a dynamically created function, which adds functionality for separate players. The most relevant parts of the code are:</p><pre><code class='language-html'>function createYTEvent(frameID, identifier) { return function (event) { var player = players[frameID]; // Set player reference ... player.playVideo(); } } </code></pre><p> <ul> <li><code>frameID</code> is the ID of the frame, used to enable the <em>YouTube Frame API</em>.</li> <li><code>identifier</code> is the ID as defined in <code>YT_ready</code>, not necessarily an <code><iframe></code> element. <code>getFrameID</code> will attempt to find the closest matching frame for a given id. That is, it returns the ID of a given <code><iframe></code> element, or: If the given element is not an <code><iframe></code>, the function looks for a child which is a <code><iframe></code>, and returns the ID of this frame. If the frame does not exists, the function will postfix the given ID by <code>-frame</code>.</li> <li>players[playerID]` refers to the initialized player instance. </li> </ul></li> </ol><p></li> </ul> <h2>Make sure that you <em>also</em> check this answer, because the core functionality of this answer is based on that.</h2> <p>Other YouTube Frame API answers. In these answers, I showed various implementations of the YouTube Frame/JavaScript API.</p> <p>这篇关于YouTube API 目标(多个)现有 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！</p>

问题描述

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

基础教程推荐