官方網站 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提供了很簡單就可以達到目的的方法，讓我們來看看要怎麼處理吧!
程式碼
small : use video URL<br /> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> $(function(){ var imgSrc = $.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small'); $('#img1').attr('src',imgSrc); }) </script>
<img src='' id='img1'><br />
big : use video ID <br />
<img src='' id='img2'>
<script type="text/javascript" src="jyuotube.js"></script>
<script type="text/javascript">
var imgSrc2 = $.jYoutube('hPzNl6NKAG0');
$('#img2').attr('src',imgSrc2);
var imgSrc2 = $.jYoutube('hPzNl6NKAG0');
$('#img2').attr('src',imgSrc2);
解說
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jyuotube.js"></script>
這兩行是載入必要的js。
jYouTube的寫法很簡單，如下：
$.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來的快速，提供給大家做個參考。
留言列表
