2011-07-24 129 views
3

我想創建一個函數,允許我將我的Vimeo視頻嵌入到我的網站上,並像YouTube播放列表一樣運行它,例如,當單擊視頻鏈接而不是重新加載頁面時只重新加載視頻。例如,這是一個電影網站,我有一個項目的預告片以及一些促銷片段,我希望能夠通過簡單地讓用戶點擊加載新視頻的鏈接來顯示所有這些內容。我將如何做到這一點?使用jquery動態加載Vimeo視頻

回答

7

這也應該起作用。

$('#some_video_container').html('<iframe src="http://player.vimeo.com/video/12345? 
           title=1&amp;byline=1&amp;portrait=1" width="643" 
           height="360" frameborder="0"></iframe>'); 
+1

http://jsfiddle.net/ELHCm/ JSFiddle Demo基於答案 – MonteCristo

5

在這裏你去。

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/7100569') + '&width=300&callback=?', function(data){ 
     $('#some_video_container').html(data.html); 
}); 
+0

我喜歡這個解決方案更好 – JohnnyQ

+0

酷。任何想法如何通過https做到這一點? – heykatieben

+0

這是舊的,所以我現在會使用[jQuery的$ .ajax](https://api.jquery.com/jQuery.ajax/)。要通過https加載,只需從url中省略協議,如下所示:$ .ajax('// www.vimeo.com/api ... **注意缺少http或https,瀏覽器將會解決此問題。只需用斜線開始url ** – jrue

0

我也用Vimeo的播放列表,在這裏找到:http://luwes.co/labs/vimeo-playlist/

你可以設置你想要的播放列表(在頂部,底部或視頻的一側)。總體而言,設置起來非常簡單。您只需將腳本中的視頻網址放入數組中:

<div id="player"></div> 
<script src="http://luwes.co/vimeowrap.js/vimeowrap.js"></script> 
<script src="http://luwes.co/vimeowrap.js/vimeowrap.playlist.js"></script> 
<script> 
    vimeowrap('player').setup({ 
     urls: [ 
      'https://vimeo.com/user3709818', 
      'https://vimeo.com/user3709818' 
     ], 
     plugins: { 
      'playlist':{} 
     } 
    }); 
</script>