【问题标题】:How to force high quality thumbnails for YouTube Player API iframe Embeds?如何为 YouTube Player API iframe Embeds 强制使用高质量缩略图?
【发布时间】:2014-11-22 00:39:40
【问题描述】:

缩略图看起来很好一年多,但突然变得模糊。 页面加载时显示的缩略图看起来是正确的,但每当使用“player.cueVideoById”显示新的缩略图时,它看起来非常模糊。

文档中没有提及如何控制缩略图质量(只有视频质量设置可用,例如“setPlaybackQuality”)。文档:https://developers.google.com/youtube/iframe_api_reference

如何强制使用高质量的缩略图?

【问题讨论】:

    标签: javascript youtube-javascript-api video-thumbnails


    【解决方案1】:

    是的,这个问题很容易重现。我创建了一个slightly modified version of the documentation example,它会加载一个视频并在一秒钟后调用setPlaybackQuality。可以清楚地看到质量下降。其实原来的缩略图是https://i.ytimg.com/vi/M7lc1UVf-VE/sddefault.jpg,正在被https://i1.ytimg.com/vi/M7lc1UVf-VE/default.jpg代替。

    虽然 Flash 播放器非常不透明,但对于 HTML5 播放器,我们可以看看(相当模糊的)source code。这段代码特别有趣(为了可读性而重新格式化):

    var c;
    if (!a.j)
    {
      var d = a.element.clientWidth,
          e=a.element.clientHeight;
      if (900 < d || 600 < e)
        c = Av(b, "maxresdefault.jpg");
      !c && (430 < d||320 < e) && (c = Av(b, "sddefault.jpg"))
    }
    c || (c = Av(b, "default.jpg"));
    

    这表明您确实不应该控制缩略图质量,而是根据视口大小进行设置。如果宽度超过 900 或高度超过 600,您将获得 maxresdefault.jpg,如果宽度超过 430 或高度超过 320,您将获得 sddefault.jpg,在所有其余情况下,您将获得 default.jpg。这确实如此 - 对于初始负载。这似乎是预期的行为。

    但是,player.cueVideoById() 不是你得到的 - 它始终是 default.jpg大概是因为 a.j 已设置(不管是什么)编辑:实际上,调试代码表明a.j 不是这里的罪魁祸首。相反,Av 函数在调用 "default.jpg" 以外的任何内容时返回 undefined,因为数据结构(特别是 b.La 映射)没有完全初始化。在我看来,这简直就是个 bug,而且似乎已经是 reported to Google

    供参考,函数Av的源码:

    function Av(a,b)
    {
      if (30 == a.O)
      {
        // This branch isn't being entered
        var c = a.La["default.jpg"];
        return c?c:a.videoId?de("//docs.google.com/vt",{id:a.videoId,authuser:a.Wa,authkey:a.Kb}):"//docs.google.com/images/doclist/cleardot.gif"
      }
      b || (b="hqdefault.jpg");
      return (c = a.La[b]) || "sddefault.jpg" == b || "maxresdefault.jpg" == b ?
        c :
        Mt(a.videoId, b)
    }
    

    Mt(a.videoId, b) 将返回正确的 URL,但函数返回 c 而不是意味着 undefined

    请注意,以上文本仅适用于 HTML5 播放器。 Flash 播放器的行为略有不同,同样不一致。

    【讨论】:

      猜你喜欢
      • 2012-02-21
      • 1970-01-01
      • 1970-01-01
      • 2014-04-07
      • 2010-11-12
      • 1970-01-01
      • 2014-02-23
      • 1970-01-01
      • 2018-01-13
      相关资源
      最近更新 更多