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.

  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，因为我已经为