複数のVimeoビデオをjQueryで読み込んでイベントを検出する

Question

OK、私は完全に立ち往生しています。私は実際にそこにいる誰かがVimeoビデオを読み込んだ経験がVimeo's Froogaloop APIであることを期待しています。

「準備完了」イベントを捕まえることができないようです。

Froogaloop：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 

マイスクリプト：

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/27027307') + '&width=300&callback=?', function(data){ 
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json 
    $('#video-container iframe').ready(function(){ 
     player = document.querySelectorAll('iframe')[0]; 
     $f(player).addEvent('ready', function(id){ 
      console.log('success'); 
     }); 

    }); 
}); 

ビデオ負荷罰金。これは私がコンソールに取得していたメッセージです：

Uncaught TypeError: Cannot read property 'ready' of undefined 

私はポーズを検出するためのイベントリスナーを使用する必要がある、など私がthis postを見ましたが、残念ながら、主な違いは、私はJSON経由で動的にロードしていますということです。また、VimeoにはFroogaloopのworking exampleがありますが、jQueryでは動作しません。

ありがとうございます!!!

Answer 1

編集（2014年8月）：私は最近、基本的にははるかにエレガントに、この問題を解決しjQuery Vimeo pluginを、書きました。しかし、あなたがハードコーディングしている場合の解決策は以下の通りです。

Vimeoビデオを読み込むときには、URLにクエリ文字列&api=1を含める必要があります。これにより、APIイベント呼び出しを行うことができます。 Vimeoには複数の動画を読み込む場合には&player_id=SOME_IDが必要です（読み込んだiframeのIDと一致する必要があります）（JSONが読み込まれた後にjQueryを使用してiframeに追加する必要があります動的に作成しています）。

私はこれで半日を失いました。 Vimeoのビデオを動的に読み込もうとする人に役立つなら、私の最終的なコードが出てきました。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 

私のjsに

var videoData = [ 
{ 
    'title':'The Farm', 
    'id':'farmvideo', 
    'videoURL':'http://vimeo.com/27027307' 
}]; 

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){ 
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json 
    $('#video-container iframe').load(function(){ 
     player = document.querySelectorAll('iframe')[0]; 
     $('#video-container iframe').attr('id', videoData[0]['id']); 
     $f(player).addEvent('ready', function(id){ 
      var vimeoVideo = $f(id); 
      console.log('success'); 
     }); 
    }); 
}); 

Answer 2

iframeの準備完了イベントの代わりにloadイベントを使用してみてください。

あなたの三行目は次のようになります。

$('#video-container iframe').load(function(){ 

Answer 3

をVimeoののFroogaloopフレームワークを使用して

は、私はあなたの例を "フォーク" とfroogaloop APIを使用して、複数の動画をVimeoのを一時停止/再生を示したバージョンを作成しました。 1つの動画を再生すると他のすべての動画の再生が停止します：http://jsfiddle.net/nerdess/D5fD4/3/