我在主视频容器下方有一些缩略图。 当您单击每个缩略图时,我会喜欢 - 相关视频加载并开始播放 使用新的 YOUTUBE API IFRAME 方法 here
我们将不胜感激您的帮助或指导
预览链接已更新***
最佳答案
请参阅此 fiddle :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
}
代码详解
- 全选
<a>
文档中的( anchor )元素 - 使用
for
遍历这些 anchor 强>。在每次迭代期间,“当前” anchor 通过a[i]
引用。 . - 检查是否
href
属性不 (!
) 使用#ytplayer
包含“test
” 的方法 Regular Expression 强>。如果此条件为真(即:href
属性不包含“#ytplayer
”),则continue
语句终止当前迭代,并跳转到下一个 anchor 。 -
innerHTML
请求当前 anchor 的 属性。 <强>match
方法用于获取视频 ID。 Regular expression/\/vi\/([^\/]+)/
意思是:匹配等于/vi/<any consecutive non-slash chars>
的子串 和群组<any consecutive non-slash chars>
.
当找到这样的子字符串时,link
变量有一个属性1
(一),它持有这个群体的值(value)。否则,link
等于null
. - 如果
link
变量不是null
, 匿名function
创建(第 5-9 行)并执行(第 9 行)。函数的第一个参数将通过vidId
引用(变量)。 - 分配一个新创建的
function
到onclick
当前 anchor 的属性。为onclick
分配一个函数属性将导致onclick
要定义的事件处理程序。 - 调用
loadVideoById
player
的方法对象(由 YouTube javascript API 定义)。 - 调用函数(在第 5-9 行创建),传递
link[1]
作为第一个参数。
引用资料
-
for
循环和continue
声明 - 创建和调用
functions
在 JavaScript 中 - Regular Expressions (正则表达式)。
-
test
RegExp
的方法对象 -
match
与正则表达式结合使用 -
innerHTML
元素的属性 -
onclick
事件处理程序 -
loadVideoById
的方法 YouTube JavaScript API
另一个有趣的答案
关于javascript - 单击使用 YOUTUBE Iframe 加载多个视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7729615/