如何使 JWPlayer VTT（缩略图预览）按需加载而不是加载？答案

【问题标题】：How to make JWPlayer VTT (thumbnail previews) load on demand instead of on load?如何使 JWPlayer VTT（缩略图预览）按需加载而不是加载？
【发布时间】：2015-05-19 15:09:38
【问题描述】：

通过 VTT 文件查看 Preview Thumbnail Tooltips 的 JWPlayer 文档，浏览器似乎会在页面加载时下载 VTT 文件中指定的所有缩略图。

我想为视频的每一秒提供一个缩略图，但是我希望客户端浏览器仅在用户将鼠标悬停在相关时间点上时才加载缩略图文件。（对于 60 分钟的视频，浏览器必须在页面加载时下载 3600 张图像是没有意义的。）

这是如何实现的？

【问题讨论】：

只有在设置播放器时才会加载。
最重要的是，对于一个 60 分钟的视频，视频的每一秒都有缩略图是没有意义的。矫枉过正，很多吗？
@MisterNeutron 和 YouTube 一样，无论如何我们都有它们，只是让它们对用户可用似乎并不过分……如果我们让他们下载所有他们。
那么，我猜你将不得不做出选择。要么提供 3600 个缩略图并全部下载，要么提供更少。或者，也许只是在 YouTube 上发布您的视频。最重要的是，JW Player 无法在用户开始悬停之前暂停下载。
确实，我们没有办法做到这一点。

标签： jwplayer jwplayer6 webvtt

【解决方案1】：

我认为您链接到 (http://support.jwplayer.com/customer/portal/articles/1407439-adding-preview-thumbnails) 的文章在提出此问题后必须已更新。在我发帖时，JW Player 支持使用单个精灵（据我所知）只有在视频开始播放时才加载。所以你的 VTT 文件看起来像这样：

WEBVTT

00:00.000 --> 00:05.000
/assets/thumbnails.jpg#xywh=0,0,160,90

00:05.000 --> 00:10.000
/assets/preview2.jpg#xywh=160,0,320,90

00:10.000 --> 00:15.000
/assets/preview3.jpg#xywh=0,90,160,180

00:15.000 --> 00:20.000
/assets/preview4.jpg#xywh=160,90,320,180

除了他们提供的示例不是很好，因为您想使用相同的文件（而且它似乎不喜欢相对 URI）。我要做的是让 ffmpeg generate thumbnails every n seconds 具有固定宽度，然后是 combine them into a single image with imagemagick's convert with +append command。然后知道视频的长度（可以通过ffprobe 确定）和各个缩略图的固定宽度，生成 VTT 文件就很简单了。

在我输入此内容后，我看到问题被标记为jwplayer6。我正在使用版本 7；这很可能只适用于较新的版本。无论如何我都会继续发帖，以防有人发现它有用。

编辑：看起来其他一些人有一个similar approach 用于生成缩略图精灵，其中包含更深入的解释和可重用代码以供下载。我的实现细节略有不同，但总体思路基本相同。值得一试。

【讨论】：