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

官方网站 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提供了很简单就可以达到目的的方法，让我们来看看要怎么处理吧!

 

Code
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>

 

解说

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

 

这两行是加载必要的js。

jYouTube的写法很简单，如下：

 

Code
$.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来的快速，提供给大家做个参考。