Click Loads multiple videos using YOUTUBE Iframe

纵然是瞬间 提交于 2019-12-03 09:09:42
Rob W

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

Another interesting answer

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!