performance - 如何高效实现 Youtube 的缩略图预览功能？

Question

我正在尝试为我的简单视频播放器实现 Youtube 的缩略图预览功能。这是它的 Snap:

好事是:一旦播放器从 HTTP 服务器获取所有缩略图预览，它就会顺利运行。

坏事是:获取所有缩略图预览需要很长时间(20-30 秒)。 (对于 14 分钟(~110 MB)的视频(.mp4 文件)，大约有 550 个缩略图预览 (160x120))

我正在做的是:当用户开始播放视频时，我会向服务器发出“total_thumbnails”HTTP 请求以获取所有视频。

Also-Note :

1. I will do the multiple HTTP request thingy in an Async Task.
2. I will not do it in the fashion, make a request, wait until download complete and then make another request.
3. I will make "total_thumbnails" HTTP requests blindly, so all the request get queued in the pipeline and later receiving responses in parallel.

额外细节:一个 HTTP (lighttpd) 服务器将运行，当用户从列表中选择要播放的 video.mp4 时，我的播放器将从那里获取所有缩略图。此外，播放器将使用同一服务器使用 HTTP 流式传输获取 video.mp4。

问题是:当我开始播放视频，然后我快速寻找时，我最终看到了这个(白色缩略图是默认的，当映射到那个时候的缩略图是尚未从服务器获取):

问题是:我如何有效地获取所有(或部分)缩略图预览，以便用户(大部分时间)获得正确及时映射缩略图的体验？
< br/> 我看过 youtube 的视频，视频一开始(很快)，播放器就能够显示所有及时正确的缩略图(无论你将拇指拖到最后一分钟还是悬停在栏的最后一分钟，几乎每次您将看到正确映射的缩略图)。

他们是同时下载所有缩略图还是下载压缩的缩略图预览系列或其他一些智能的东西正在发生？

有人解决过这个问题吗？

Answer 1

1. 将多个缩略图组合成单个容器图像。使用 Canvas (我不是 JS 开发人员，但相信这是正确的词)在客户端分别提取每个缩略图。例如，here is example of such container image used by youtube .这适用于各种协议(protocol)(例如启用或不启用保持事件)。
2. 预处理缩略图以减小其大小。尽可能降低 jpeg 质量 (~q=70)。您也可以尝试稍微模糊缩略图或减少颜色数量。
3. 优化下载顺序。例如，如果您有长度为 2:55 的视频:
   1. 首先，下载包含 8 个拇指的容器图像，涵盖整个视频时间范围:0:00、0:25、0:50、1:15、1:40、2:05、2:30、2:55。这使您的服务对于速度较慢的客户端来说看起来像是“即时工作”。
   2. 接下来，下载 4 个容器图像，总共 32 个拇指，覆盖整个视频范围，但更密集:0:00、0:06、0:11、0:17，...
   3. 现在，不分先后顺序逐步下载所有其他缩略图。