使用Node.js/Angular-cli拉取Youtube最高清缩略图失效问题咨询

首先明确：YouTube并不是禁止拉取maxresdefault（最高画质）缩略图，但你的代码切换后出问题，主要是因为这个尺寸的缩略图有严格的存在条件，以及你没有做 fallback 处理导致的。

核心原因分析 #

• 不是所有内容都有maxres缩略图：
  YouTube只会为分辨率≥1080p的视频生成maxresdefault缩略图；对于频道来说，只有当频道上传过足够高分辨率的头像/封面资源时，才会有maxres尺寸的频道缩略图。如果内容本身不符合要求，这个尺寸的缩略图根本不存在，请求它会返回404错误或者默认占位图，直接导致你的img标签加载失败。
  而hqdefault是YouTube为绝大多数视频/频道都提供的通用尺寸，所以你之前用它没问题。

• API返回字段的缺失问题：
  当maxres缩略图不存在时，YouTube Data API的响应里不会包含thumbnails.maxres这个字段。你直接访问video.thumbnails.maxres.url，会触发undefined错误，进而让Angular渲染出无效的img src，导致功能异常。

解决方法 #

给你的代码加一个降级 fallback 逻辑，优先尝试maxres，不存在就用high，再不行用更低的尺寸，同时动态显示当前使用的缩略图类型：

<div class="col-md-3">
  <img 
    [src]="video.thumbnails.maxres?.url || video.thumbnails.high.url || video.thumbnails.medium.url" 
    height="auto" 
    width="auto" 
  />
  <h4>{{ video.thumbnails.maxres ? 'maxresdefault' : video.thumbnails.high ? 'hqdefault' : 'medium' }}</h4>
</div>

这里用了Angular的安全导航操作符?.，避免访问不存在的字段时出错；同时用||做降级判断，确保总有一个有效的URL可以加载。

额外提示 #

如果你是直接构造缩略图URL（而非通过API获取），比如视频的https://i.ytimg.com/vi/{VIDEO_ID}/maxresdefault.jpg，同样要注意：这个URL仅对高分辨率视频有效，低分辨率视频请求它会返回占位图。这种情况下，你可以先请求这个URL，监听加载失败事件，再切换到低尺寸的URL。

内容的提问来源于stack exchange，提问作者C. Morett