Vimeo API：播放按鈕和多個視頻

Question

我遇到了一些麻煩。我剛剛發現你可以用js控制vimeo，現在我正在嘗試創建一個播放按鈕，開始播放vimeo視頻。

我遇到的問題是我在同一頁面上有多個視頻。我拿了示例/遊樂場文件（從這裏http://player.vimeo.com/playground/https://github.com/vimeo/player-api/tree/master/javascript）並刪除了我不需要的功能，但是，我無法理解如何將播放按鈕連接到某個視頻。

這是我迄今爲止

HTML：

<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0"></iframe> 
<div class="intro"> 
    <span class="hide">Play 1</span> 
</div> 
<iframe id="player_2" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_2" width="540" height="304" frameborder="0"></iframe> 
<div class="intro"> 
    <span class="hide">Play 2</span> 
</div> 

JS：

  var vimeoPlayers = document.querySelectorAll('iframe'), 
       player; 

      for (var i = 0, length = vimeoPlayers.length; i < length; i++) { 
       player = vimeoPlayers[i]; 
       $f(player).addEvent('ready', ready); 
      } 


      function addEvent(element, eventName, callback) { 
       if (element.addEventListener) { 
        element.addEventListener(eventName, callback, false); 
       } 
       else { 
        element.attachEvent(eventName, callback, false); 
       } 
      } 


      function ready(player_id) { 
       // Keep a reference to Froogaloop for this player 
       var container = document.getElementById(player_id).parentNode.parentNode, 
        froogaloop = $f(player_id); 

       function setupSimpleButtons() { 
        var buttons = container.querySelector('div.intro'), 
         playBtn = buttons.querySelector('.hide'); 

        // Call play when play button clicked 
        addEvent(playBtn, 'click', function() { 
         froogaloop.api('play'); 
        }, false); 



       } 

       setupSimpleButtons(); 
      } 
     })(); 

如果我有一些代碼是不必要的，請幫我刪除它。 非常感謝。

Answer 1

您的ready()函數每個vimeo播放器調用一次。您需要更改使用addEvent按鈕連接哪個對象。要做到這一點，你可能需要在按鈕本身上放置id屬性。

Answer 2

我想出了一個辦法做到這一點很容易，你可以在這裏看到一個例子： http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html