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

Question

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

我们将不胜感激您的帮助或指导

PREVIEW ON JSFIDDLE HERE

预览链接已更新***

Answer 1

请参阅此 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
}      

代码详解

1. 全选<a>文档中的( anchor )元素
2. 使用 for 遍历这些 anchor 。在每次迭代期间，“当前” anchor 通过 a[i] 引用。 .
3. 检查是否href属性不 ( ! ) 使用 #ytplayer 包含“test ” 的方法 Regular Expression 。如果此条件为真(即:href 属性不包含“#ytplayer”)，则 continue 语句终止当前迭代，并跳转到下一个 anchor 。
4. innerHTML 请求当前 anchor 的 属性。 <强> match 方法用于获取视频 ID。 Regular expression /\/vi\/([^\/]+)/意思是:匹配等于 /vi/<any consecutive non-slash chars> 的子串 和群组 <any consecutive non-slash chars> .
   当找到这样的子字符串时，link变量有一个属性 1 (一)，它持有这个群体的值(value)。否则，link等于 null .
5. 如果link变量不是 null , 匿名 function 创建(第 5-9 行)并执行(第 9 行)。函数的第一个参数将通过 vidId 引用(变量)。
6. 分配一个新创建的 function 到 onclick当前 anchor 的属性。为 onclick 分配一个函数属性将导致 onclick 要定义的事件处理程序。
7. 调用 loadVideoById player 的方法对象(由 YouTube javascript API 定义)。
9. 调用函数(在第 5-9 行创建)，传递 link[1]作为第一个参数。

引用资料

• for 循环和 continue 声明
• 创建和调用 functions 在 JavaScript 中
• Regular Expressions (正则表达式)。
• test RegExp 的方法对象
• match 与正则表达式结合使用
• innerHTML 元素的属性
• onclick 事件处理程序
• loadVideoById 的方法 YouTube JavaScript API

另一个有趣的答案

• > YouTube iframe API: how do I control a iframe player that's already in the HTML?