[jQuery Plugin]抓取YouTube影片的截圖 jYouTube

分類: jQuery|技術分享 作者: andrew

20 八月 2009

sample
官方網站 http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html
js下載點 http://plugins.jquery.com/files/jyuotube.zip

介紹

YouTube(http://www.youtube.com/)是一個非常知名的影像網站,影片瀏覽起來速度還蠻快的,也因此很多網站在想要顯示影片時,都會連到這個網站。作法上有很多種,假使我們今天希望在自己的網站放置某個YouTube影片的截圖,然後點截圖才連到YouTube網站去瀏覽影片,這個截圖的動作有沒有比較簡單的做法呢?jQuery的Plugin--jYouTube提供了很簡單就可以達到目的的方法,讓我們來看看要怎麼處理吧!

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
small : use video URL<br />
<img src='' id='img1'><br />
big   : use video ID <br />
<img src='' id='img2'>
 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jyuotube.js"></script>
<script type="text/javascript">
 
$(function(){
 
    var imgSrc = $.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small');
    var imgSrc2 = $.jYoutube('hPzNl6NKAG0');
 
	$('#img1').attr('src',imgSrc);
	$('#img2').attr('src',imgSrc2);
 
})
 
</script>

解說

1
2
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jyuotube.js"></script>

這兩行是載入必要的js。

jYouTube的寫法很簡單,如下:

1
2
$.jYoutube('hPzNl6NKAG0'); //指定YouTube的影片ID後回傳一個大的截圖網址
$.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small'); //指定YouTube的影片網址後回傳一個小的截圖網址

也就說,jYoutube會使用到兩個參數,第一個參數你可以設定為YouTube的影片ID(如:hPzNl6NKAG0)或是YouTube的影片網址(如:http://www.youtube.com/watch?v=hPzNl6NKAG0);第二個參數則是希望顯示的截圖大小,如果保留空白則顯示較大的截圖,相對的如果輸入small則顯示小的截圖。實際顯示的效果可參照本文開頭的範例圖。

總結

jYouTube提供了很簡單就能取得YouTube影片的截圖,在需要大量引用時比用printscreen來的快速,提供給大家做個參考。

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。