点击加载使用YouTube的iframe多个视频 [英] Click Loads multiple videos using YOUTUBE Iframe

问题描述

我有主视频容器下面的一些缩略图。
相关的视频负载，并开始播放 - 当你点击每个缩略图我会喜欢
使用新的YouTube API IFRAME办法 rel=\"nofollow\">

您的帮助或方向将是AP preciated

preVIEW ON的jsfiddle这里

preVIEW链路加以更新***

解决方案

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

负荷运行此code：

  VAR一个= document.getElementsByTagName（A）; // 1
对于（VAR I = 0; I＆LT;则为a.length;我++）{// 2
    如果（！/＃YouTube播放/ .TEST（A [I] .href））继续; // 3
    VAR链接= A [I] .innerHTML.match（/ \\ / VI \\ /（[^ \\ /] +）/）; // 4
    如果（链接）（功能（vidId）{// 5
        一个由[i] = .onclick功能（）{// 6
            player.loadVideoById（vidId）; // 7
        } // 8
    }）（联系[1]）; // 9
}
 

的code的详细解释

1. 选择所有的＆LT; A＆gt;将文档中的（锚）元素


2. 循环使用过的 这些锚 。在每次迭代中，当前主播通过称为一个[我] 。


3. 检查的href 属性是否确实的不的（！）含有 #ytplayer 使用的 测试 在的正防爆pression 。如果这个条件为真（即：的href 属性不包含 #ytplayer ），在 继续 语句终止当前循环，并跳转到下一个锚点。


4. 在 的innerHTML 要求当前锚的财产。在 匹配 方法被用来获取视频ID。该定期EX pression / \\ / VI \\ /（[^ \\ /] +）/ 表示：匹配相当于一个子的 / VI /＆LT;任何连续的非斜线字符＆GT; 的，和组＆LT;任何连续的非斜线字符方式＆gt;
   
   当这样一个子被发现，在链接变量有一个属性 1 （一），持有这种价值组。否则，链接等于空。


5. 如果在链接变量不是空，一个匿名的的 函数 创建（线5 -9）和执行（第9行）。该函数的第一个参数将通过被引用的 vidId 的（变量）。


6. 分配新创建 函数 以当前锚的的onclick 属性。分配给的onclick 属性将导致在的 的onclick 以定义事件处理程序。


7. 调用在 loadVideoById 的播放器的方法对象（通过的 YouTube上的JavaScript API ）。


8. ＆NBSP;


9. 调用函数（在5-9行创建），通过链接[1] 作为第一个参数。

参考

• 为 循环和在 继续 语句


• 创建和调用 功能 在JavaScript中


• 普通防爆pressions （正则表达式）。


• 测试 的正则表达式对象的方法


• 在 匹配 在一个普通的前pression结合功能


• 在 的innerHTML 元素的属性


• 在 的onclick 事件处理程序


• 在 loadVideoById 在的 YouTube上的JavaScript API

另一个有趣的答案

• Youtube iframe的API：我如何控制iframe的球员这是已经在HTML
？

I have some thumbnails below the main video container. I will like when you click on each thumbnail - the associated video loads and start playing Using the NEW YOUTUBE API IFRAME approach here

Your help or direction will be appreciated

PREVIEW ON JSFIDDLE HERE

PREVIEW LINK UPDATED***

解决方案

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

1. Select all <a> (anchor) elements in the document
2. Loop through these anchors using for. During each iteration, the "current" anchor is referred through a[i].
3. 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.
4. 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.
5. 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).
6. 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.
7. Invokes the loadVideoById method of the player object (as defined by the YouTube javascript API).
8.  
9. Invokes the function (created at lines 5-9), passing link[1] as a first parameter.

References

• for loops and the continue statement
• Creating and calling functions in JavaScript
• Regular Expressions (RegExp).
• test method of the RegExp object
• The match function in conjunction with a Regular expression
• The innerHTML property of an element
• The onclick event handler
• The loadVideoById method of the YouTube JavaScript API

Another interesting answer

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

这篇关于点击加载使用YouTube的iframe多个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！