解決衝突

我已經在這裏發現了使用自定義的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

回答

相關問題