使用jQuery轻松显示YouTube缩略图

最新推荐文章于 2025-05-01 08:38:22 发布

dingshi7798

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量248

点赞数

文章标签： javascript ViewUI

您可能不知道，但是youTube为您上传的视频拍摄了屏幕截图，通常有2个主图像（一个大缩略图和一个小缩略图）。这是在网页上显示YouTube视频缩略图的方法。

YouTube网址

网址采用以下格式（我们需要v参数）：

YouTube大拇指

大拇指

480×360
http://img.youtube.com/vi/dXo0LextZTU/0.jpg

小拇指（开始）

128×96
http://img.youtube.com/vi/dXo0LextZTU/1.jpg

小拇指（持续一分钟左右）

128×96
http://img.youtube.com/vi/dXo0LextZTU/2.jpg

用法

// Returns big screenshot by video id
$.jYoutube('rSUfWXcNAOw');

// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

jQuery代码

$.extend({
  jYoutube: function( url, size ){
    if(url === null){ return ""; }

    size = (size === null) ? "big" : size;
    var vid;
    var results;

    results = url.match("[\?&]v=([^&#]*)");

    vid = ( results === null ) ? url : results[1];

    if(size == "small"){
      return "http://img.youtube.com/vi/"+vid+"/2.jpg";
    }else {
      return "http://img.youtube.com/vi/"+vid+"/0.jpg";
    }
  }
});

自己尝试



jYoutube - jQuery YouTube plugin demo

  
  

   
   Submit YouTube link

   
   
  
    
    
  
    
    

   
   


   
   Your YouTube video thumbs:

资源

From: https://www.sitepoint.com/display-youtube-thumbnails-easy-jquery/