点击使用YOUTUBE Iframe加载多个video

我在主video容器下面有一些缩略图。 我想点击每个缩略图 – 关联的video加载并开始播放使用新的YOUTUBE API IFRAME方法

您的帮助或指示将不胜感激

在这里预览JSFIDDLE

预览链接更新***

Answer 1

看到这个小提琴： http ： //jsfiddle.net/Y9j7R/5/

在加载时运行此代码：

var a = document.getElementsByTagName("a"); //1 for(var i=0; i 

代码的详细说明

1. 选择文档中的所有 （锚点）元素
2. 使用for循环遍历这些锚点。 在每次迭代期间，“当前”锚通过a[i]引用。
3. 使用正则表达式的test方法检查href属性是否（ ! ）包含“ #ytplayer ”。 如果此条件为真（即： href属性不包含“ #ytplayer ”），则continue语句将终止当前迭代，并跳转到下一个锚点。
4. 请求当前锚点的innerHTML属性。 match方法用于获取videoID。 正则表达式 /\/vi\/([^\/]+)/表示：匹配一个等于/vi/的子字符串，以及组 。
   找到这样的子字符串时， link变量具有属性1 （一），该属性保存该组的值。 否则， link等于null 。
5. 如果link变量不为null ，则创建匿名function （第5-9行）并执行（第9行）。 该函数的第一个参数将通过vidId （变量）引用。
6. 将新创建的function分配给当前锚点的onclick属性。 将函数分配给onclick属性将导致定义onclick事件处理程序。
7. 调用loadVideoById player对象的loadVideoById方法（由YouTube javascript API定义）。
9. 调用函数（在第5-9行创建），将link[1]作为第一个参数传递。

参考

• for循环和continue语句
• 在JavaScript中创建和调用functions
• 正则表达式 （RegExp）。
• RegExp对象的test方法
• match函数与正则表达式结合使用
• 元素的innerHTML属性
• onclick事件处理程序
• YouTube JavaScript API的loadVideoById方法

另一个有趣的答案

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