如何使JWPlayer VTT(缩略图预览)按需加载而不是加载?

时间:2015-05-19 15:09:38

标签: jwplayer jwplayer6 webvtt

通过VT​​T文件查看Preview Thumbnail Tooltips的JWPlayer文档,浏览器似乎下载了页面加载时VTT文件中指定的所有缩略图图像。

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

这是如何完成的?

1 个答案:

答案 0 :(得分:0)

我认为您提交此问题时,您链接到的文章(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用于生成缩略图精灵,其中包含更深入的解释和可重复使用的代码供下载。我的实施细节有所不同,但总体思路基本相同。值得一试。