查看通过 VTT 文件预览缩略图工具提示的 JWPlayer 文档,浏览器似乎会在页面加载时下载 VTT 文件中指定的所有缩略图图像。
我想为视频的每一秒提供一个缩略图,但是我希望客户端浏览器仅在用户将鼠标悬停在相关时间点时才加载缩略图文件。(对于 60 分钟的视频,浏览器必须在页面加载时下载 3600 张图像是没有意义的。)
这是如何实现的?
我认为您链接到的文章(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每 n 秒生成一个具有固定宽度的缩略图,然后使用 imagemagick 的with command将它们组合成一个图像convert
+append
。然后知道视频的长度(可以用 确定ffprobe
)和各个缩略图的固定宽度,生成 VTT 文件就很简单了。
在我输入这个之后,我看到这个问题被标记了jwplayer6
。我正在使用版本 7;这很可能只适用于较新的版本。无论如何,我将继续发布,以防有人发现它有用。
编辑:看起来其他人也有类似的方法来生成缩略图精灵,并提供更深入的解释和可重用的下载代码。我的实现细节略有不同,但总体思路基本相同。值得一试。