获取youtube动画缩略图

Question

这是将youtube动画缩略图嵌入到我的网站中的一种方法吗？我说的不是静态缩略图，而是看起来像gif的缩略图。大约3秒的动画缩略图

谢谢

Answer 1

截至 2019 年 6 月：

1. 获取静态缩略图很简单

• 它们通过 YouTube API 公开，更好的是，它们遵循非常简单和统一的 URL 结构（更多详细信息请点击此处）。

2. 有限数量的浏览器支持 Youtube 的动画缩略图。

• 显然，桌面浏览器 Chrome 和 Opera（来源）
• 顺便说一下，缩略图是WebP图像格式，具有更广泛的浏览器支持。

3. 为有限数量的视频获取动画缩略图相对容易。

例如，您可以在浏览器开发工具中检查网络活动（Chrome 的更多详细信息）。

打开网络面板，访问包含所需视频的页面列表，清除网络活动（您也可以选择“图像”以仅显示与图像相关的活动）并将所需视频悬停。然后只需右键单击所需的资源并复制 url。

如果图像有帮助...

动画缩略图的网址如下所示：

https://i.ytimg.com/an_webp/zdOmNiXvM3w/mqdefault_6s.webp?du=3000&sqp=CPDloOgF&rs=AOn4CLD9rYflZAMK6qBIbYJDoQZLk9UARw

4.据我所知，目前无法以编程方式获取动画缩略图（没有网页抓取）

• 换句话说，给定一个视频 ID，目前无法通过 API 或定义的 URL 模式获取动画缩略图 URL。

PS.：希望有人能证明我在第 4 点上是错的，以下是这些 URL 的一些示例：

https://i.ytimg.com/an_webp/zdOmNiXvM3w/mqdefault_6s.webp?du=3000&sqp=CPDloOgF&rs=AOn4CLD9rYflZAMK6qBIbYJDoQZLk9UARw

https://i.ytimg.com/an_webp/oIIDZq4nZpo/mqdefault_6s.webp?du=3000&sqp=CLyqoegF&rs=AOn4CLD9DyqMoxBTiOPTUX8FQJmUfiu8NA

https://i.ytimg.com/an_webp/X9tU8ybzcFs/mqdefault_6s.webp?du=3000&sqp=CLHroOgF&rs=AOn4CLAX8j6uWUko_54aPJLwkbAe_cUR3w

更改视频 ID 或其他参数不会返回有效的缩略图。

Answer 2

不知道是否对你有帮助

但是当您转到 YouTube 中的搜索页面时，您可以访问该对象

window.ytInitialData

这里我们有一个名为： window.ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents["0"].itemSectionRenderer.contents[2].videoRenderer.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails["0"].url

也许你可以找到一种方法来检索这些数据

访问这样的搜索页面： https://www.youtube.com/results?search_query=USPwv1zwWV4 我在控制台中尝试过的内容：

let videos = window.ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents["0"].itemSectionRenderer.contents;


if (!videos.length) { // includes other renderers i.e: "did you mean ..."
    console.log('no videos in search'); 
    //return;
}

let video = videos.filter( v => v.videoRenderer && v.videoRenderer.videoId == "USPwv1zwWV4")

if (!video.length) { 
    console.log('no video by that ID in search'); 
    //return;
}

let thumbs = video[0].videoRenderer.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails;

if (!thumbs.length) { 
    console.log('no moving thumbs for that video'); 
    //return;
}

console.log(thumbs[0].url);