如何生成不同来源网站的视频URL缩略图并实现前端展示

你之前测试的YouTube、Dailymotion通用缩略图方法失效，核心原因是这两个站点不属于固定CDN路径暴露公开缩略图的平台，无法通过拼接固定静态路径获取封面，需要按站点规则做专属适配：

站点专属适配逻辑 #

• Matterport 链接识别规则：这类链接的特征是域名匹配my.matterport.com，且查询参数带m=开头的模型唯一ID。从链接中提取该ID后，可通过平台公开的元数据查询接口直接获取对应空间的缩略图直链，不需要爬取页面DOM元素。
• Nodalview 链接识别规则：这类链接的特征是域名匹配nodalview.com，路径部分跟随一串加密的内容唯一ID。提取该ID后，同样可通过平台的公开元数据查询接口，从返回结果的元数据字段中取到视频封面的静态图地址。

补全后的代码实现 #

在你现有代码框架的基础上，补全链接识别、接口请求、地址返回的逻辑：

async generateThumbnail(url){
  let thumbnailPath = '';
  // 匹配Matterport站点链接
  if (url.includes('my.matterport.com/show/')) {
    // 从URL查询参数中提取模型ID
    const targetModelId = new URL(url).searchParams.get('m');
    // 通过平台公开接口请求对应模型的元数据
    const response = await fetch(`服务端代理的Matterport元数据接口?modelId=${targetModelId}`);
    const metaData = await response.json();
    thumbnailPath = metaData.thumbnailUrl;
  }
  // 匹配Nodalview站点链接
  else if (url.includes('nodalview.com/')) {
    // 从URL路径中提取内容ID
    const targetContentId = new URL(url).pathname.replaceAll('/', '');
    // 通过平台公开接口请求对应内容的元数据
    const response = await fetch(`服务端代理的Nodalview元数据接口?contentId=${targetContentId}`);
    const metaData = await response.json();
    thumbnailPath = metaData.coverImageUrl;
  }
  // 未适配站点的兜底逻辑：返回项目内置的默认占位图
  else {
    thumbnailPath = '/assets/default-video-thumbnail.png';
  }
  return thumbnailPath;
}

前端标签绑定 #

将上述方法返回的缩略图地址直接绑定到img标签的src属性即可完成展示，对应模板代码调整为：

<!-- 绑定方法返回的缩略图地址 -->
<img [src]="returnedThumbnail" alt="视频缩略图">

注意：所有第三方接口请求建议通过你自有项目的服务端做中转代理，避免前端直接请求第三方域名触发跨域拦截，整个流程不需要模拟页面爬取行为，稳定性远高于DOM提取的方案。

内容的提问来源于stack exchange，提问作者srinivas