Question

我开发了一个脚本，该脚本可以抓取HD分辨率的视频缩略图，并将该缩略图覆盖在任何嵌入式iframe上。到目前为止，这是我开发的摘要：

.append(
  $('<img/>').attr({
    'src': 'http://i.ytimg.com/vi/' + this.videoId + '/maxresdefault.jpg'
  })
);

但是，我想弄清楚的是，如果hqdefault.jpg未生成，或者是maxresdefault.jpg，则如何检索视频缩略图，例如maxresdefault.jpg，而不是hqdefault.jpg。返回为非常小的默认图像（例如120 x 90像素），例如：http://i.ytimg.com/vi/VGazSZUYyf4/maxresdefault.jpg？

简而言之，如果maxresdefault.jpg不是全尺寸生成的，它将代替; (function($, window, document, undefined) { "use strict"; var defaults = { darkenThumbnail: false }; function YouTubeHDThumbnail(element, options) { this.elem = element; this.$elem = $(element); this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = 'youTubeHDThumbnail'; this.init(); } $.extend(YouTubeHDThumbnail.prototype, { init: function() { this.videoId = null, this.$thumbnail = null; // retrieve HD thumbnail var src = this.$elem.attr('src'), srcSplit = src.split('?'), srcMain = null, srcPure = null; if (srcSplit.length > 0) { srcMain = srcSplit[0]; srcPure = srcMain.split('/'); this.videoId = srcPure.pop(); this.$thumbnail = $('<a />') .attr({ 'href': '#' }) .addClass('yt-hd-thumbnail') .append( $('<img/>').attr({ 'src': 'http://i.ytimg.com/vi/' + this.videoId + '/maxresdefault.jpg' }) ); } else { console.log('The src attribute of iframe is not valid.'); return; } // create container var $outerContainer = $('<div />') .addClass('yt-hd-thumbnail-outer-container') .insertAfter(this.elem) .css('width', this.$elem.attr('width')), $innerContainer = $('<div />') .addClass('yt-hd-thumbnail-inner-container') .appendTo($outerContainer); // insert thumbnail and iframe if (this.settings.darkenThumbnail) { this.$thumbnail.addClass('yt-hd-thumbnail-darken'); } $innerContainer.append(this.$thumbnail).append(this.elem); // add click handler to thumbnail var self = this; this.$thumbnail.on('click', function(e) { e.preventDefault(); src = src + '&autoplay=1'; $innerContainer.addClass('yt-hd-thumbnail-clicked'); self.$elem.attr({ 'src': src }); }); }, }); $.fn['youTubeHDThumbnail'] = function(options) { return this.each(function() { if (!$.data(this, "plugin_" + 'youTubeHDThumbnail')) { $.data(this, "plugin_" + 'youTubeHDThumbnail', new YouTubeHDThumbnail(this, options)); } }); }; })(jQuery, window, document); /* YouTube HD Thumbnails / Add HD Class */ $(document).ready(function() { $('iframe[src*="youtube.com"]').addClass("yt-hd-thumbnail"); }); /* YouTube HD Thumbnails / Thumbnail Hover Effect */ $(document).ready(function() { $('iframe.yt-hd-thumbnail').youTubeHDThumbnail({ darkenThumbnail: true }); });。

有什么想法吗？

更新

这是一个更扩展的示例：

.yt-hd-thumbnail-inner-container {
  height: 0;
  padding-top: 56.25%;
  position: relative
}

.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail,
.yt-hd-thumbnail-inner-container>iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-width: 0
}

.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail {
  z-index: 2
}

.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail img {
  width: 100%
}

.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail.yt-hd-thumbnail-darken:before {
  display: block;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .3;
  -webkit-transition: opacity .3s ease;
  -moz-transition: opacity .3s ease;
  transition: opacity .3s ease
}

.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail.yt-hd-thumbnail-darken:hover:before {
  opacity: 0
}

.yt-hd-thumbnail-inner-container>iframe {
  max-width: 100%;
  opacity: 0;
  -webkit-transition: opacity .3s ease .3s;
  -moz-transition: opacity .3s ease .3s;
  transition: opacity .3s ease .3s
}

.yt-hd-thumbnail-inner-container.yt-hd-thumbnail-clicked>a.yt-hd-thumbnail {
  display: none
}

.yt-hd-thumbnail-inner-container.yt-hd-thumbnail-clicked>iframe {
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b>Video with a Max Resolution of: 480p</b>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/QgfxdTnLdt4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<br>

<b>Video with a Max Resolution of: 1080p</b>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fPj-mEFPhrA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

a = (a - int(a)) * 10000

Answer 1

尝试以下方法：

 $(document).ready(function()
{
    $(".backup_picture").on("error", function(){
        $(this).attr('src', './hqdefault.jpg');
    });
});

您需要在HTML中使用上述代码进行一次编辑。只需将class='backup_picture'添加到您要用作备用src的任何img标签中即可。

希望这会有所帮助！

如果图像具有特定尺寸，是否检索备用src？

1 个答案: