Question

这是一种在我的网站中嵌入来自youtube的动画缩略图的方法吗？我不是在谈论静态缩略图，而是一个看起来像gif的缩略图。动画缩略图或多或少3秒

由于

Answer 1

截至2019年6月：

1。获取静态缩略图非常简单

它们通过YouTube API公开，甚至更好，它们遵循非常简单和统一的URL结构（更多详细信息here）。

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

显然，台式机浏览器是Chrome和Opera（source）
缩略图btw是WebP图像格式，它的browser support较宽。

3。为有限数量的视频获取动画的缩略图非常容易。

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

在网络面板打开的情况下，访问包含所需视频的页面列表，清除网络活动（您也可以选择“ Img”以仅显示与图像有关的活动），然后将鼠标悬停在所需视频上。然后只需右键单击所需的资源并复制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

Gifs.com有一个免费的API，用于从与媒体相关的URL生成带水印的gif。

https://gifs.com/dashboard/api

它没有明确提及它，但实际上它接受Youtube URL并从中生成预览。

这里是如何与cURL一起使用的示例

curl -XPOST -H "Content-type: application/json" -d '{ "source": "https://www.youtube.com/watch?v=74KxwkLjE9E" }' 'https://api.gifs.com/media/import'

生成该文件大约需要一两分钟，因此，如果使用服务器存储/缓存gif，则可以创建自己的个人预览生成器。

这是文档的存档链接 https://web.archive.org/web/20190408212718/http://docs.gifs.com/docs/authentication-key

Answer 3

警告！现在，它仅适用于FPS = 30的视频，我将尽快对其进行重写。

我输入了FFmpeg脚本。要获取许多未压缩的YouTube移动缩略图的变体，您需要：

下载FFmpeg并将FFmpeg.exe解压缩到一个文件夹中。
从YouTube将所需的视频下载到同一文件夹，并将其重命名为“视频”（如果视频具有16：9的长宽比）或“ sar”（如果视频具有其他/特殊的长宽比）。
在文件夹中运行cmd。
手动编辑我的脚本：
- 第一个'00：00：00.0'=原始mqdefault_6s.webp中第一帧的时间（在下载的视频中，hh：mm：ss。（1/10秒））（从“网络”标签中），< / li>
- 第二个'00：00：00.0'= img.youtube.com/vi/（视频的ID）/1.jpg上显示的帧的时间，
- 第3个“ 00：00：00.0” = img.youtube.com/vi/（视频ID）/2.jpg上显示的帧的时间，
- 第4个'00：00：00.0'= img.youtube.com/vi/（视频的ID）/3.jpg上显示的帧的时间。
运行我的脚本。

易于阅读：

ffmpeg -i SAR.mp4 -vf "crop=in_w:in_w/16*9" -c:a copy video.mp4
rem // If to obtain a 16: 9 aspect ratio, you need to crop the thumbnail from above and below.
ffmpeg -i SAR.mp4 -vf "crop=in_h/9*16:in_h" -c:a copy video.mp4
rem // If to obtain a 16: 9 aspect ratio, you need to crop the thumbnail on the sides.
ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted0.mp4
ffmpeg -i Cutted0.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x0.mp4
ffmpeg -i FasterThen2x0.mp4 -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 maxresdefault_6s.webp
ffmpeg -i FasterThen2x0.mp4 -vf "scale=640:480:force_original_aspect_ratio=decrease,pad=640:480:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 sddefault_6s.webp
ffmpeg -i FasterThen2x0.mp4 -vf "scale=480:360:force_original_aspect_ratio=decrease,pad=480:360:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 hqdefault_6s.webp
copy hqdefault_6s.webp 0_6s.webp
ffmpeg -i FasterThen2x0.mp4 -vf "scale=320:180:force_original_aspect_ratio=decrease,pad=320:180:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 mqdefault_6s.webp
ffmpeg -i FasterThen2x0.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 default_6s.webp
ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted1.mp4
ffmpeg -i Cutted1.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x1.mp4
ffmpeg -i FasterThen2x1.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 1_6s.webp
ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted2.mp4
ffmpeg -i Cutted2.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x2.mp4
ffmpeg -i FasterThen2x2.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 2_6s.webp
ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted3.mp4
ffmpeg -i Cutted3.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x3.mp4
ffmpeg -i FasterThen2x3.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 3_6s.webp

准备执行：

为SAR压缩（上下左右的裁剪缩略图）：

ffmpeg -i SAR.mp4 -vf "crop=in_w:in_w/16*9" -c:a copy video.mp4 && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted0.mp4 && ffmpeg -i Cutted0.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x0.mp4 && ffmpeg -i FasterThen2x0.mp4 -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 maxresdefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=640:480:force_original_aspect_ratio=decrease,pad=640:480:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 sddefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=480:360:force_original_aspect_ratio=decrease,pad=480:360:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 hqdefault_6s.webp && copy hqdefault_6s.webp 0_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=320:180:force_original_aspect_ratio=decrease,pad=320:180:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 mqdefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 default_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted1.mp4 && ffmpeg -i Cutted1.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x1.mp4 && ffmpeg -i FasterThen2x1.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 1_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted2.mp4 && ffmpeg -i Cutted2.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x2.mp4 && ffmpeg -i FasterThen2x2.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 2_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted3.mp4 && ffmpeg -i Cutted3.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x3.mp4 && ffmpeg -i FasterThen2x3.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 3_6s.webp

为SAR压缩（侧面为缩略图）：

ffmpeg -i SAR.mp4 -vf "crop=in_h/9*16:in_h" -c:a copy video.mp4 && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted0.mp4 && ffmpeg -i Cutted0.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x0.mp4 && ffmpeg -i FasterThen2x0.mp4 -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 maxresdefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=640:480:force_original_aspect_ratio=decrease,pad=640:480:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 sddefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=480:360:force_original_aspect_ratio=decrease,pad=480:360:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 hqdefault_6s.webp && copy hqdefault_6s.webp 0_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=320:180:force_original_aspect_ratio=decrease,pad=320:180:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 mqdefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 default_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted1.mp4 && ffmpeg -i Cutted1.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x1.mp4 && ffmpeg -i FasterThen2x1.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 1_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted2.mp4 && ffmpeg -i Cutted2.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x2.mp4 && ffmpeg -i FasterThen2x2.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 2_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted3.mp4 && ffmpeg -i Cutted3.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x3.mp4 && ffmpeg -i FasterThen2x3.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 3_6s.webp

压缩为16：9（“视频”）：

ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted0.mp4 && ffmpeg -i Cutted0.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x0.mp4 && ffmpeg -i FasterThen2x0.mp4 -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 maxresdefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=640:480:force_original_aspect_ratio=decrease,pad=640:480:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 sddefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=480:360:force_original_aspect_ratio=decrease,pad=480:360:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 hqdefault_6s.webp && copy hqdefault_6s.webp 0_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=320:180:force_original_aspect_ratio=decrease,pad=320:180:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 mqdefault_6s.webp && ffmpeg -i FasterThen2x0.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 default_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted1.mp4 && ffmpeg -i Cutted1.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x1.mp4 && ffmpeg -i FasterThen2x1.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 1_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted2.mp4 && ffmpeg -i Cutted2.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x2.mp4 && ffmpeg -i FasterThen2x2.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 2_6s.webp && ffmpeg -ss 00:00:00.0 -i video.mp4 -c copy -t 6 Cutted3.mp4 && ffmpeg -i Cutted3.mp4 -filter_complex "[0:v]setpts=675/1976*PTS[v];[0:a]atempo=1976/675[a]" -map "[v]" -map "[a]" FasterThen2x3.mp4 && ffmpeg -i FasterThen2x3.mp4 -vf "scale=120:90:force_original_aspect_ratio=decrease,pad=120:90:(ow-iw)/2:(oh-ih)/2" -vcodec libwebp -lossless 1 -loop 0 -an -vsync 0 3_6s.webp

要获得许多压缩 YouTube移动缩略图的变体，您需要重写我的脚本，以便它以给定的帧数创建webp（您可以在原始mqdefault_6s.webp中找到它），持续时间精确为3000毫秒和压缩的图像（或类似的图像，会产生锐度或色彩损失，如下图所示）。

从原始 webp https://i.stack.imgur.com/Iow4N.png中提取的帧。

从自制 webp https://i.stack.imgur.com/Q3loy.png中提取的帧。

Answer 4

这可能无法直接回答OP的问题，但可能对浏览者有用。

事实证明，YouTube移动缩略图的URL参数不仅是半随机的，而且它们也在不断变化。我的猜测是，这是因为Google不希望我们能够以编程方式获取这些缩略图。至少现在还没有。

一种解决方法是将所需的每个缩略图保存到服务器，将其命名为视频的ID（例如dQw4w9WgXcQ.webp），然后在加载此类视频的循环中检查其功能，如下所示：

function checkMovingThumbnail(imgSrc) {
  return new Promise((resolve, reject) => {
    var img = new Image();
    img.onload = function() {
      resolve();
    };
    img.onerror = function() {
      reject();
    };
    img.src = imgSrc;
  });
}

然后：

checkMovingThumbnail('/assets/' + videoID + '.webp').then(function() {
  //Load the thumbnail on mouseover
}

通过这种方式，您可以使用相同的脚本来加载所有视频（无论是否下载了所有移动的缩略图），此外还可以检查是否支持webp，以减轻Safari和IE的负担。

Answer 5

您可以使用框架缩略图创建简短的动画缩略图：

frame1: https://i.ytimg.com/vi/<YouTube_Video_ID_HERE>/1.jpg
frame2: https://i.ytimg.com/vi/<YouTube_Video_ID_HERE>/2.jpg
frame3: https://i.ytimg.com/vi/<YouTube_Video_ID_HERE>/3.jpg

获取youtube动画缩略图

5 个答案: