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_readygetFrameIDonYouTubePlayerAPIReady 是在 这个答案.这两种方法都可以在没有任何预加载库的情况下实现.在我之前的回答中,我展示了一种实现单帧功能的方法.

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

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_readygetFrameIDonYouTubePlayerAPIReady 和 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
    3. 定义的所有函数

  • 此处显示了以下方法的声明,但使用 这个答案.基于例子的解释:

    1. 循环遍历每个 <iframe id> 对象,该对象位于 <..class="thumb"> 之后.
    2. 在每个框架元素处,检索 id,并将其存储在 identifier 变量中.
    3. 通过getFrameID 获取iframe 的内部ID.这可确保为 API 正确格式化 <iframe>.在这个示例代码中,返回的 ID 等于 identifier,因为我已经为