用jQuery加載多個Vimeo視頻並檢測事件

好的，我完全被卡住了。我真的希望有人在那裏可以加載Vimeo's Froogaloop API加載Vimeo視頻。用jQuery加載多個Vimeo視頻並檢測事件

我似乎無法獲得'準備好'事件。

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。

在此先感謝！

來源

2011-08-03 jrue

檢查操場： http://player.vimeo.com/playground – danger89

編輯（2014年8月）：我最近寫了一jQuery Vimeo plugin，基本上更優雅的解決了這個問題。但解決方案，如果你是硬編碼，這是如下：

當加載Vimeo視頻，你必須包括查詢字符串&api=1的URL。這使您可以進行API事件調用。 Vimeo還需要一個&player_id=SOME_ID，如果你打算加載多個視頻，需要匹配它加載的iframe上的id（或者在我的情況下，使用jQuery在加載JSON後將其添加到iframe中，因爲我是動態創建它。）

我在此失去了半天。以下是我的最終代碼出現的內容，如果對試圖加載Vimeo視頻的其他人有幫助。

使用的Vimeo的Froogaloop框架

<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'); 
     }); 
    }); 
});

來源

2011-08-04 21:26:52 jrue

上面的jQuery Vimeo插件jrue鏈接太棒了。只要忘記Froogaloop並使用該插件，如果你有jQuery。 –

這個插件比稱爲Froogaloop的搞砸事物要好得多！謝謝@jrue; – IcyFlame

您的插件在Chrome和IE上都像魅力一樣。感謝您提供更簡單的方法來處理此過程。你應該爲Vimeo工作。 – blackhawk

嘗試使用load事件代替iframe的就緒事件。

你的第三個行會：

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

來源

2011-08-03 23:56:12 Jake

謝謝，我能解決它。雖然這很好知道！ – jrue

這解決了我試圖展示並播放尚未加載的視頻的問題。謝謝你。 – jyoseph

我已經「分叉」的例子，並創建了一個版本，顯示了使用froogaloop API的多部影片播放/暫停VIMEO。所以如果你開始一個視頻所有其他視頻停止播放：http://jsfiddle.net/nerdess/D5fD4/3/

來源

2012-07-24 22:42:12 nerdess

嗨@nerdess - 我使用了這段代碼（謝謝 - 很好！），並發現了一個小問題：如果你暫停一部電影，然後播放同一部電影，它將不會播放。我已經改變了'play'監聽器事件，以便if語句現在看起來像這樣：'if（vimeo.currentVideo！= null && vimeo.currentVideo.element！= $ f（player_id）.element）{'這似乎是糾正問題。 –

我很好奇你將如何解決視頻在過程中聲明太晚的事實（Uncaught TypeError：無法讀取未定義的屬性視頻） – Imperative

用jQuery加載多個Vimeo視頻並檢測事件

回答

相關問題