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

Click Loads multiple videos using YOUTUBE Iframe

本文关键字：YOUTUBE Iframe 视频 加载      更新时间：2023-09-26

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

感谢您的帮助或指导

PREVIEW ON JSFIDDLE HERE

预览链接更新***

查看此页面: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. 选择文档中所有for(锚)元素
  2. 使用 a[i] 循环遍历这些锚。在每次迭代中，通过href引用"当前"锚。
  3. 使用正则表达式的 href 方法检查!属性是否不 (#ytplayer)包含"test"。如果此条件为真(即:#ytplayer属性不包含"<a>0")，则 innerHTML 语句终止当前迭代，并跳转到下一个锚。
  4. 请求当前锚的 match 属性。通过 /'/vi'/([^'/]+)/ 方法获取视频id。正则表达式/vi/<any consecutive non-slash chars>表示:匹配一个等于 <any consecutive non-slash chars> 的子字符串，并将link分组。
    当找到这样的子字符串时，1变量有一个属性link(1)，它保存该组的值。否则，null = link。
  5. 如果null变量不是function，则创建一个匿名的 vidId (第5-9行)并执行(第9行)。函数的第一个参数将通过 function (变量)引用。
  6. 将新创建的 onclick 分配给当前锚的onclick属性。将函数赋值给onclick属性将导致定义 loadVideoById 事件处理程序。
  7. 调用link[1]对象的 player 方法(由YouTube javascript API定义)。
  8. ,
  9. 调用函数(在第5-9行创建)，传递for作为第一个参数。
引用

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

又一个有趣的答案

  • YouTube iframe API:我如何控制iframe播放器's已经在HTML?
相关文章：