YouTube API 目标(多个)现有 iframe

2022-01-19 00:00:00 youtube-api javascript youtube-javascript-api

我正在尝试了解如何使用 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.
1. YouTube Frame API 是从 http://youtube.com/player_api.
2. 当这个外部脚本完成加载后，onYoutubePlayerAPIReady 被调用，这反过来又激活了使用 YT_ready
此处显示了以下方法的声明，但使用这个答案.基于例子的解释:
1. 循环遍历每个 <iframe id> 对象，该对象位于 <..class="thumb"> 之后.
2. 在每个框架元素处，检索 id，并将其存储在 identifier 变量中.
3. 通过getFrameID 获取iframe 的内部ID.这可确保为 API 正确格式化 <iframe>.在这个示例代码中，返回的 ID 等于 identifier，因为我已经为 </code> 附加了一个 ID.李><li>当 <code><iframe></code> 存在且有效的 YouTube 视频时，将创建一个新的播放器实例，并将引用存储在 <code>players</code> 对象中，可通过以下方式访问关键 <code>frameID</code>.</li><li>在创建播放器实例时，会定义一个 **<code>onReady</code>* 事件.当框架的 API 完全初始化时，将调用此方法.</li><li><p><code>createYTEvent</code><br/>此方法返回一个动态创建的函数，该函数为单独的播放器添加了功能.代码中最相关的部分是:</p><pre><code>function createYTEvent(frameID, identifier) {返回函数(事件){var player = 玩家 [frameID];//设置播放器参考...播放器.playVideo();}}</code></pre><p><ul><li><code>frameID</code> 是框架的 ID，用于启用 YouTube Frame API.</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>确保您也检查这个答案，因为这个答案的核心功能就是基于这个.</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> 解决方案 <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 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.</p> <p>In this answer, I focus on multiple frames.</p> <p>HTML example code (important tags and attributes are capitalized, <code><iframe src id></code>):</p><pre><code><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>JavaScript code (<code>YT_ready</code>, <code>getFrameID</code>, <code>onYouTubePlayerAPIReady</code> and the YouTube Frame API script loader are defined here)</p><pre><code>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 YouTube Frame API 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. 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>.</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><code>createYTEvent</code><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>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 YouTube Frame API.</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 also 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> </div> <div class=""> <p><strong>相关文章</strong></p> </div> </article> </div> </main> <footer> <div class="container"> <p> <span>友情链接：</span> <a href="https://www.688576.com" target="_blank">雨伦博客</a>   <a href="https://www.yaanbbs.net" target="_blank">雅安论坛</a> </p> <a href="https://beian.miit.gov.cn" target="_blank">京ICP备15023317号-6</a> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?30b42218aa13759c43de5f1971d0a93b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>