每秒钟获取一个视频帧的图片

Question

Youtube有这个很酷的功能,您可以通过视频"擦洗"它们,并在每秒钟为您提供视频的缩略图视图:

有谁知道这是如何实现的？服务器是否必须单独发送每个图像,还是可以使用javascript从客户端计算机上的视频中提取它们？

关于"提取"的实现,我有点迷失,但我想一个canvas元素可以用来绘制帧提取后.

如果必须使用服务器:由于图像很小,我想我可以使用精灵,但如果我们谈论视频的每一秒,那么该文件可能会变得非常大.(与我想的视频数据相比仍然很小,但并不完全是最佳的)

Answer 1

tl;dr 服务器生成精灵表，根据需要下载。

我们可以猜测图像是在服务器端生成的。YouTube 对每个视频进行的处理比提取几个缩略图要严格得多。此外，快速谷歌表明此功能已经存在了几年 - 可能比执行此客户端所需的 HTML5/JS/浏览器马力还要长。

我打开Download Tools > Resources浏览器，从我的提要中查看了新发布的视频。有趣的是，目前还没有预览（我查看时视频只播放了大约 20 分钟）。这表明图像可能是在服务器端生成的，只是尚未完成处理。

检查旧视频并查看Resources > Images并没有发现任何有趣的东西。所以我切换到Timelines并点击记录，然后开始将鼠标悬停在时间线上并观察网络流量。当我移动鼠标时，*.jpg文件开始加载，其中包含视频给定部分的 25 个缩略图：

我还注意到，初始文件M0.jpg是相同大小的图像，但包含整个视频的大约 100 个缩略图，而不是一个片段的 25 个缩略图。例子：

再次使用新视频进行测试，看起来M0.jpg首先下载了 100 张图像，并提供了基本的低分辨率、不太精细的缩略图预览。然后，当您将鼠标悬停在视频的不同部分时，会根据需要下载更高分辨率的M0.jpg、等。M1.jpg

有趣的是，对于较长的视频，这一点不会改变，这解释了为什么缩略图有时会很糟糕。如果您的连接或 YouTube 获取高分辨率缩略图的速度太慢，那么您将只能看到一个很长的视频的 100 个低分辨率缩略图。不确定这对于较短的视频如何起作用。另外，看看他们从什么分布中提取缩略图可能会很有趣（是不是视频的每 1/100 都是线性的？或者其他什么）。

最后一点是，我注意到，如果您使用带有时间码的网址，您不会得到完整的 100 张图像表，M0.jpg而是完全不同的尺寸，其中M#.jpg包含从时间码到视频结尾的大约 25 个低分辨率缩略图。

我猜他们假设当人们链接到特定时间码时，用户不太可能跳到视频中较早的点。此外，这比发送普通 100 张图像获得的约 75 张图像的粒度要小得多M0.jpg。另一方面，它的大小也只有 30% 左右，所以也许速度就那么重要。

至于生成缩略图，ffmpeg是一个好方法：

要制作多个屏幕截图并将它们放入单个图像文件中（创建图块），您可以使用 FFmpeg 的图块视频过滤器，如下所示：

ffmpeg -ss 00:00:10 -i movie.avi -frames 1 -vf "select=not(mod(n\,1000)),scale=320:240,tile=2x3" out.png

这将在影片中寻找 10 秒，选择每 1000 帧，将其缩放到 320x240 像素，并在输出图像 out.png 中创建 2x3 的图块，如下所示：