生成Jwplayer工具提示缩略图选项的所有文件（.vtt + sprite）。

Question

什么是生成与".VTT"文件和附带的jpg精灵图最佳方法，用于Jwplayer的Tooltip Thumbnails（http://www.jwplayer.com/blog/building-tooltip-thumbnails-with-encodingcom/-）？

我知道如何使用php制作图像精灵，但我不知道如何在每个视频的时间点截取屏幕截图。我认为必须有一个服务器工具来完成所有任务，但我找不到它。

谢谢

- Tahola

---

我以前没有使用过ffmpeg来完成这个任务，但是我使用过一个叫做Scorp的视频缩略图生成器，它可以生成缩略图和VTT文件。你可以在这里找到它 - http://www.suu-design.com/projects.html - emaxsaun

谢谢Ethan，但这适用于Ubuntu服务器吗？我的意思是我能自动完成还是需要手动操作？ - Tahola

这是一个手动的应用程序。 - emaxsaun

Answer 1

我编写了一个脚本来完成这个任务。给定一个视频文件（MP4或M4v），生成缩略图，压缩成sprite，并生成与JWPlayer工具提示缩略图兼容的VTT文件。所有的图像操作都使用来自ffmpeg、ImageMagick以及可选的sips和optipng等工具。WebVTT生成部分是我自己编写的。

为了使用该脚本，您至少需要安装ffmpeg和imagemagick。

Github代码在这里：https://github.com/vlanard/videoscripts（位于sprites/目录下）。

基本要点是：

1. 创建一堆缩略图，例如从视频中每隔45秒截取一张。

ffmpeg -i ../archive/myvideofile.mp4 -f image2 -bt 20M -vf fps=1/45 thumbs/myvideofile/tv%03d.png 

将这些缩略图调整为小尺寸，例如宽度为100像素

sips --resampleWidth 100 thumbs/myvideofile/tv001.png thumbs/myvideofile/tv002.png thumbs/myvideofile/tv003.png

如果没有Sips，则可以使用ImageMagick实用程序：

mogrify -geometry 100x thumbs/myvideofile/tv001.png thumbs/myvideofile/tv002.png thumbs/myvideofile/tv003.png

使用ImageMagick实用程序获取其中一个缩略图的高度和宽度尺寸，作为网格坐标的基础

identify -format "%g - %f" thumbs/myvideofile/tv001.png 

输出结果如下： 100x55+0+0 - tv001.png

我们从中解析出100和55作为宽度和高度，以及每个缩略图的基本几何信息（W，H，X，Y）

然后我们从单个缩略图生成单个精灵贴图。我们根据为该视频生成的缩略图数量确定目标网格大小（例如2x2，8x8），并使用ImageMagick实用程序传递精灵图形参数。

montage thumbs/myvideofile/tv*.png -tile 2x2 -geometry 100x55+0+0 thumbs/myvideofile/myvideofile_sprite.png

可选择在此处执行额外的压缩步骤以使精灵图更小

optipng thumbs/myvideofile/myvideofile_sprite.png

我们会根据创建的缩略图数量生成VTT文件，使用我们用来分隔缩略图的间隔来标记每个时间段，并利用我们所知道的与每个连续图像对应的部分映射到关联段的坐标。

- randalv

---

谢谢，我最终做了类似的事情，但在获取缩略图之前，我会获取视频的长度，以便所有视频都有相同数量的缩略图，我发现这样更容易生成vtt。 - Tahola

这绝对是一份出色的工作！如果您允许，我想制作一个Ruby封装器作为gem？ - scaryguy

@scaryguy，请查收！我已经提交了最新的GitHub更新，包含以下关键内容：1）使用JPG替换PNG格式，精灵文件更小；2）增加调整功能，更好地将快照图像同步到vtt文件中的起始时间，以抵消FFmpeg产生的时间漂移；3）从精灵文件中省略第一张图片（0秒），因为JwPlayer不会显示它；4）现在可以通过命令行参数配置快照截取的时机。 - randalv

@randalv 它已经上线了 :) 感谢你的启发！https://dev59.com/BmIj5IYBdhLWcg3wq2xz#21474786 - scaryguy

@Sflagg 请在终端中运行 which sips 确认您已经安装了它。如果您看到它，我建议手动运行 sips --resampleWidth 100 yourfilewhatever.png 来查看返回结果（当然要将文件名替换为合法的文件名）。 - randalv

Answer 2

我开发了一个Ruby gem，可以轻松创建.VTT文件和缩略图精灵。

感谢@randalv的启示！

你可以在这里查看它： https://github.com/scaryguy/jwthumbs

---

用法

实例化你的视频文件：

movie = Jwthumbs::Movie.new("YOUR_VIDEO.mp4")

Jwthumbs::Movie.new 接受第二个参数作为 options 哈希。您可以像这样在实例化视频时同时配置多个内容：

movie = Jwthumbs::Movie.new("YOUR_VIDEO.mp4", seconds_between: 60, sprite_name: "my_sprite_name.jpg")

在实例化视频之后，您可以使用Jwthumbs::Movie文件来配置相关事项：

movie = Jwthumbs::Movie.new("YOUR_VIDEO.mp4")
movie.seconds_between = 60
movie.sprite_name = "my_sprite_name.jpg"

然后创建缩略图和 .VTT 文件，只需运行此命令。

movie.create_thumbs!

- scaryguy

---

现在有两种语言选项真是太好了。非常感谢您的贡献！ - randalv

@randalv，也许你可以给我的仓库添加一个回链，就像我为你做的那样 :) 你知道，回链可以通过搜索引擎更容易地找到东西。别忘了点赞这个答案 ;) - scaryguy

亲爱的负分者，与其对一个仅包含“开源”项目链接的答案进行负分，也许您应该尝试为社区做些事情。 - scaryguy

Answer 3

我知道这已经是几年前的事情了，但我遇到了同样的问题，并找到了一个命令行工具，可以快速生成精灵图，并且从1.0.6版本开始支持WebVTT创建。它的名字叫做mt，您可以在这里查看。

引用他们的文档，您可以像这样使用它：

只需运行mt并提供任何视频文件作为参数：mt video.avi

一些设置可以通过直接提供给mt的运行时标志进行更改，有关更多信息，请运行mt --help

- cytec

Answer 4

选项1：

您可以使用encoding.com的API，并告诉他们同时导出vtt文件

我建议阅读encoding.com知识库中的“如何为JW播放器创建时间同步缩略图？”解释。

选项2：

使用电影缩略图生成器(mtn)，这是一个在UNIX、Windows系统上运行的命令行工具。但是您将需要编写自定义脚本来生成相应的VTT文件

• 超快！感谢FFmpeg的libavcodec。
• 命令行程序：可用于远程连接到协作服务器或在脚本中使用。
• 批量模式：递归搜索电影文件目录。默认情况下以较低优先级运行（在Linux上为nice 10，在Windows上为idle）。 若要以正常优先级运行，请使用-n选项。
• 缩略图被组合在一个jpeg文件中，也可以单独保存（-I选项）。
• 在Linux和Windows的Unicode文件名中工作正常 （可能需要使用-f fontfile更改字体）。

- 0x1gene