Question

如果原始src的比例尺缩小了“ x”个像素（宽度/高度），是否可以代替另一个图像src？

为了更具描述性，我正在开发一个脚本，该脚本可以在视频iframe上叠加高质量的缩略图。对于高清格式的视频（例如720p和1080p），它们会返回完整的maxresdefault缩略图。

但是，对于非HD格式的视频（小于720p分辨率的视频），它们会生成非常小的maxresdefault.jpg图像，我希望将其替换为hqdefault.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

这似乎可行：

/*... */
const thumb = $('<img/>', {
  src: 'http://i.ytimg.com/vi/' + this.videoId + '/maxresdefault.jpg'
});
thumb.on('load', () => {
  const src = thumb[0].width < 121 ?
    'https://cdn.pixabay.com/photo/2015/06/19/17/58/sample-815141_960_720.jpg' :
    'http://i.ytimg.com/vi/' + this.videoId + '/maxresdefault.jpg';
  this.$thumbnail.append( $('<img/>',{src}) );
});
/*... */

;
(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')
          
          const thumb = $('<img/>', {
            src: 'http://i.ytimg.com/vi/' + this.videoId + '/maxresdefault.jpg'
          });
          thumb.on('load', () => {
            const src = thumb[0].width < 121 ?
               'https://cdn.pixabay.com/photo/2015/06/19/17/58/sample-815141_960_720.jpg':
               'http://i.ytimg.com/vi/' + this.videoId + '/maxresdefault.jpg';
            this.$thumbnail.append(
              $('<img/>',{src})
            );
          });
          
      } 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
}
.yt-hd-thumbnail-inner-container a {
  overflow: hidden;
}

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

我做了什么：

我删除了.append($('<img />')...)部分。
相反，我在变量中放置了<img>元素，然后等待其加载。
在该img的load事件中，我检查了它的宽度。如果小于121，我将src设置为我的漂亮图片。如果没有，我通过原始的（已经加载，因此被缓存）。
我将<img>附加到this.$thumnail。

121来自以下事实：像素化缩略图的宽度为120px。

如果原始src的高度/宽度小于“ x”个像素，请更改Image src吗？

1 个答案: