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

Question

Youtube有这个很酷的功能，您可以通过视频“擦洗”，并在每秒钟为您提供视频的缩略图视图：

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

关于“提取”的实现，我有点迷失，但我想可以使用canvas元素在提取后绘制帧。

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

Answer 1

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

我们可以猜测，图像是在服务器端生成的。与拉动一些缩略图相比，YouTube对每个视频的处理都要强烈得多。此外，一个快速谷歌建议这个功能已存在几年 - 可能比执行此客户端所需的HTML5 / JS /浏览器功能更长。

我在浏览器中点击了Download Tools > Resources并从我的Feed中检出了newly-posted video。有趣的是，还没有预览（当我检查时，视频只有大约20分钟）。这表明图像可能是在服务器端生成的，并且还没有完成处理。

检查an older video并查看Resources > Images并未发现任何有趣的内容。所以我切换到Timelines并点击记录，然后开始在时间线上进行鼠标移动并观察网络流量。当我移动鼠标时，*.jpg文件开始加载，并且它们包含来自视频的给定部分的25个缩略图：

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

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

有趣的是，longer videos没有改变，这解释了为什么缩略图有时会很糟糕。如果您的连接或YouTube在获取更高分辨率的缩略图时速度太慢，那么您只会遇到一个非常长视频的100张低分辨率缩略图。不确定这对短视频的效果如何。此外，看看他们从哪个分布中拉出缩略图可能会很有趣（它是视频中每1/100的线性还是其他东西）。

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

我猜他们假设当人们链接到特定的时间码时，用户不太可能跳到视频的早期点。此外，这比通过发送普通100图像M0.jpg所获得的~75张图像的粒度更小。另一方面，它也是大约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图块，如下所示：

     

Answer 2

在HLS中，这是通过＃EXT-X-I-FRAMES-ONLY播放列表（HLS v4）完成的，称为Trick Play。希望这有助于您的研究。

https://developer.apple.com/library/ios/technotes/tn2288/_index.html#//apple_ref/doc/uid/DTS40012238-CH1-I_FRAME_PLAYLIST