代码之家  ›  专栏  ›  技术社区  ›  nrweb

如果原始src的高度/宽度小于“x”像素,则更改图像src?

  •  0
  • nrweb  · 技术社区  · 6 年前

    如果原始src的比例小于“x”像素(宽度/高度),是否可以检索替代图像src来代替其他图像src?

    为了更具描述性,我正在开发一个脚本,它在视频iframe上覆盖一个高质量的缩略图图像。对于高清格式的视频(如720p和1080p),它们返回全尺寸 maxresdefault 缩略图。

    但是,对于非高清格式的视频(分辨率小于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>
    1 回复  |  直到 6 年前
        1
  •  1
  •   tao    6 年前

    这似乎有效:

    /*... */
    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> 变量中的元素,并等待其加载。
    • load 如果是那个img,我检查它的宽度。如果小于 121 ,我设置 src 为了我漂亮的照片。如果没有,则传递原始的(它已经加载,因此被缓存)。
    • 我附加了 <img> this.$thumnail .

    121个 来源于像素化的缩略图的宽度为 120px .