Question

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

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

预览链接更新***

Answer 1

在加载时运行此代码：

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>（锚点）元素
使用 for 循环浏览这些锚点。在每次迭代期间，“当前”锚点通过a[i]引用。
使用 test 检查href属性不（!）是否包含“#ytplayer” Regular Expression 的方法。如果此条件为真（即：href属性不包含“#ytplayer”）， continue 语句将终止当前迭代，并跳转到下一个锚。
请求当前锚点的 innerHTML 属性。 match 方法用于获取视频ID。 Regular expression /\/vi\/([^\/]+)/表示：匹配等于 /vi/<any consecutive non-slash chars> 的子字符串和组<any consecutive non-slash chars>。
找到这样的子字符串时，link变量具有属性1（一），它保存该组的值。否则，link等于null。
如果link变量不是null，则会创建匿名 function （第5-9行）并执行（第9行）。该函数的第一个参数将通过 vidId （变量）引用。
将新创建的 function 分配给当前锚点的onclick属性。将函数分配给onclick属性将导致定义 onclick 事件处理程序。
调用player对象的 loadVideoById 方法（由YouTube javascript API定义）。
调用函数（在第5-9行创建），将link[1]作为第一个参数传递。

参考

for 循环和 continue 声明
在JavaScript中创建并调用 functions
Regular Expressions （RegExp）。

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?

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

1 个答案:

代码的详细说明

参考

另一个有趣的答案