单击使用 YOUTUBE Iframe 加载多个视频

发布于 2024-12-09 10:14:01 字数 351 浏览 0 评论 0 原文

我在主视频容器下方有一些缩略图。我会喜欢当您单击每个缩略图时 - 相关视频加载并开始播放使用新的 YOUTUBE API IFRAME 方法此处

您的帮助或指导将是感谢

JSFIDDLE 预览这里

预览链接已更新***

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦过后 2024-12-16 10:14:01

请参阅此小提琴： http://jsfiddle.net/Y9j7R/5/

在加载时运行此代码：

var a = document.getElementsByTagName("a");            //1
for(var i=0; i<a.length; i++){                         //2
    if(!/#ytplayer/.test(a[i].href)) continue;         //3
    var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/); //4
    if(link) (function(vidId){                         //5
        a[i].onclick = function(){                     //6
            player.loadVideoById(vidId);               //7
        }                                              //8
    })(link[1]);                                       //9
}

代码详细解释

选择文档中所有（锚点）元素，
使用for。在每次迭代期间，通过a[i]引用“当前”锚点。
使用 href 属性是否不 (!) 包含“#ytplayer” href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp/test" rel="nofollow noreferrer">测试方法<强>正则表达式。如果此条件成立（即：href 属性不包含“#ytplayer”），continue 语句终止当前迭代，并跳转到下一个锚点。
innerHTML请求当前锚点的属性。 匹配 方法用于获取视频id。正则表达式 /\/vi\/([^\ /]+)/ 表示：匹配等于/vi/<任何连续的非斜杠字符>的子字符串，并且分组<任何连续的非斜杠字符>.
当找到这样的子字符串时，link 变量就有一个属性 1（一），它保存该组的值。否则，link 等于null。
如果 link 变量不为 null，则为匿名function 被创建（第 5-9 行）并执行（第 9 行）。函数的第一个参数将通过 vidId （变量）引用。
分配新创建的函数 到当前锚点的 onclick 属性。将函数分配给 onclick 属性将导致 要定义的 onclick 事件处理程序。
调用 loadVideoById< player 对象的 /strong> 方法（由 YouTube javascript API）。
调用函数（在第 5-9 行创建），并将 link[1] 作为第一个参数传递。

参考文献

for 循环和 继续语句
创建并调用函数
正则表达式 (RegExp)。
测试< RegExp 对象的 /strong> 方法
match 函数与正则表达式结合使用
innerHTML 元素的属性
onclick 事件处理程序
loadVideoById 方法href="http://code.google.com/apis/youtube/js_api_reference.html" rel="nofollow noreferrer">YouTube JavaScript API

另一个有趣的答案

YouTube iframe API：如何控制 HTML 中已有的 iframe 播放器？

See this fiddle: http://jsfiddle.net/Y9j7R/5/

Run this code on load:

var a = document.getElementsByTagName("a");            //1
for(var i=0; i<a.length; i++){                         //2
    if(!/#ytplayer/.test(a[i].href)) continue;         //3
    var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/); //4
    if(link) (function(vidId){                         //5
        a[i].onclick = function(){                     //6
            player.loadVideoById(vidId);               //7
        }                                              //8
    })(link[1]);                                       //9
}

Detailed explanation of the code

Select all <a> (anchor) elements in the document
Loop through these anchors using for. During each iteration, the "current" anchor is referred through a[i].
Check whether the href attribute does not (!) contain "#ytplayer" using the test method of the Regular Expression. If this condition is true (ie: the href attribute does not contain "#ytplayer"), the continue statement terminates the current iteration, and jumps to the next anchor.
The innerHTML property of the current anchor is requested. The match method is used to get the video id. The Regular expression /\/vi\/([^\/]+)/ means: match a substring which equals /vi/<any consecutive non-slash chars>, and group <any consecutive non-slash chars>.
When such a substring is found, the link variable has a property 1 (one), which holds the value of this group. Otherwise, link equals null.
If the link variable is not null, an anonymous function is created (lines 5-9) and executed (line 9). The first argument of the function will be referenced through vidId (variable).
Assigns a newly created function to the onclick property of the current anchor. Assigning a function to the onclick property will cause the onclick event handler to be defined.
Invokes the loadVideoById method of the player object (as defined by the YouTube javascript API).
Invokes the function (created at lines 5-9), passing link[1] as a first parameter.