首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用jQuery一次性获取YouTube或Vimeo缩略图

使用jQuery一次性获取YouTube或Vimeo缩略图,可以通过以下步骤实现:

  1. 引入jQuery库

在HTML文件中引入jQuery库,可以使用CDN地址或者下载到本地并引入。

代码语言:html<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
复制
  1. 编写JavaScript代码

使用jQuery的$.ajax()方法获取YouTube或Vimeo的API数据,然后提取缩略图URL。

代码语言:javascript
复制
function getThumbnail(videoUrl, callback) {
  var videoId = getVideoId(videoUrl);
  if (videoId) {
    if (isYouTube(videoUrl)) {
      $.ajax({
        url: 'https://www.googleapis.com/youtube/v3/videos?id=' + videoId + '&key=YOUR_API_KEY&part=snippet',
        dataType: 'jsonp',
        success: function(data) {
          if (data.items && data.items.length > 0) {
            var thumbnailUrl = data.items[0].snippet.thumbnails.default.url;
            callback(thumbnailUrl);
          }
        }
      });
    } else if (isVimeo(videoUrl)) {
      $.ajax({
        url: 'https://vimeo.com/api/v2/video/' + videoId + '.json',
        dataType: 'json',
        success: function(data) {
          if (data && data.length > 0) {
            var thumbnailUrl = data[0].thumbnail_small;
            callback(thumbnailUrl);
          }
        }
      });
    }
  }
}

function getVideoId(videoUrl) {
  var videoId = null;
  if (isYouTube(videoUrl)) {
    videoId = videoUrl.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/)[1];
  } else if (isVimeo(videoUrl)) {
    videoId = videoUrl.match(/https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/)[3];
  }
  return videoId;
}

function isYouTube(videoUrl) {
  return videoUrl.indexOf('youtube.com') > -1 || videoUrl.indexOf('youtu.be') > -1;
}

function isVimeo(videoUrl) {
  return videoUrl.indexOf('vimeo.com') > -1;
}
  1. 调用getThumbnail()方法

在需要获取缩略图的地方调用getThumbnail()方法,并传入回调函数处理缩略图URL。

代码语言:javascript
复制
getThumbnail('https://www.youtube.com/watch?v=VIDEO_ID', function(thumbnailUrl) {
  console.log(thumbnailUrl);
});

getThumbnail('https://vimeo.com/VIDEO_ID', function(thumbnailUrl) {
  console.log(thumbnailUrl);
});

注意:在实际使用中,需要将YOUR_API_KEY替换为自己的Google API密钥。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券