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

Question

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

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

但是，我要弄清楚的是，如果未生成 hqdefault.jpg或将其作为很小比例的默认图像(例如120 x)返回，则如何检索视频缩略图，例如 maxresdefault.jpg，而不是 maxresdefault.jpg。 90像素)，如下所示: http://i.ytimg.com/vi/VGazSZUYyf4/maxresdefault.jpg？

简而言之，如果未以全尺寸生成 hqdefault.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>

Answer 1

尝试以下方法:

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

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

希望这可以帮助!