解决冲突

我已经在这里发现了使用自定义的YouTube播放列表插件页面https://github.com/Giorgio003/Youtube-TV 解决冲突

当我有它的伟大工程页面上的播放器的一个实例，但如果我尝试添加两个或更多玩家，只有一个会渲染。

这是一个有两个播放列表的示例页面：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>YouTube TV</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
     <link href="assets/ytv.css" type="text/css" rel="stylesheet" /> 
     <style type="text/css"> 
      body{ 
       background: #eee; 
       margin: 0; 
       padding: 0; 
      } 
      .test-title{ 
       margin-bottom: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="container"> 
       <div class="col-md-9 col-lg-11"> 
        <div> 
         <h4 class="test-title">Testing Responsive YouTube Playlist</h4> 
        </div> 
        <div id="responsive1"></div> 

        <div id="responsive2"></div> 
       </div> 
      </div> 
     </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script type="text/javascript" src="src/ytv.js"></script> 
     <script> 
      var apiKey = 'ThisIsAValidKey'; 
      window.onload = function(){ 
       window.controller = new YTV('responsive1', { 
        playlist: 'PLaK7th3DkkqgBtr94FWKF5HNlbNIHWkww', 
        responsive: true 
       }); 
      }; 
      window.onload = function(){ 
       window.controller = new YTV('responsive2', { 
        playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN', 
        responsive: true 
       }); 
      }; 

     </script> 
    </body> 
</html>

我搬出ytv.js的API密钥到一个全局变量。

// Set apiKey as global var 
// var apiKey = 'ThisIsAValidKey';

除此之外，js与找到的here相同。

如何修改此插件以允许多个实例？

更新： 我也更名为window变量，结果没有变化。

window.controller1 = new YTV(...); 
window.controller2 = new YTV(...);

解决方案： 由于从标记的回答推断下面

window.onload = function(){ 
    $('#responsive1').ytv({ 
     playlist: 'PL6x-m6zFmZvueGe7XnT0z1Qlsn2zUs5_F', 
     responsive: true 
    }); 
    $('#responsive2').ytv({ 
     playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN', 
     responsive: true 
    }); 
};

来源

2017-02-23 lockheart

通过查看Youtube的代码，我可以看到它已经处理多个jQuery的实例。

if ((typeof jQuery !== 'undefined')) { 
    jQuery.fn.extend({ 
     ytv: function(options) { 
      return this.each(function() { 
       new YTV(this.id, options); 
      }); 
     } 
    }); 
}

我创建了一个快速小提琴：https://jsfiddle.net/pj8kpbzw/ 请检查控制台，它打印两个实例。

来源

2017-02-23 16:12:17 Muthoos

我看到您的示例确实打印了2个对象，但是，我无法在问题中提供的示例中显示该对象。 – lockheart

啊，好吧......我能够使它工作。 JQuery调用方法只接受选项对象 - 不是'id'和'opts'。 – lockheart

我不知道为什么你需要将它附加到window.controller！您可以使用$（document）.ready而不是window.onload来调用ytv实例。这会起作用吗？ – Muthoos

回答

相关问题