Html 如何生成用于VideoJS的视频预览缩略图？

我转向了VideoJs（html5），需要弄清楚如何为seekbar生成缩略图。我尝试过使用videojs缩略图，但是这需要一个预加载的vtt文件和一个sprite图像。我正在试图找到一种方法来自动加载常规mp4（h264）文件的缩略图。Flowplayer能够通过自己的视频实现这一点，现在正试图找出如何通过VideoJs实现这一点

我希望他们的插件是一些我错过了，能够做到这一点，但还没有找到它。我想到的最好办法是从mp4文件中提取缩略图，将其组合成一个精灵图像，并使用#xywh属性

如果没有在VideoJS中自动执行此操作的插件，我可以使用什么命令行程序在Ubuntu上创建带有sprite图像的VTT文件？我正在处理大量的视频文件，所以手动操作是不可行的

我的视频播放器：

   <div class="video_player_js" style="width:auto; height:auto;">
  <video id="video" class="vjs-16-9 video-js vjs-default-skin vjs-big-play-centered"
    controls preload="auto" width="auto" height="auto"
    data-setup='{"fluid": true}'>
    <source src="test.mp4" type="video/mp4" />
    <track kind="metadata" src="thumbnails.vtt"></track>
    <p class="vjs-no-js">To view this video enabled Javascript.</a></p>
  </video>

---

很惊讶我没有得到任何评论/回答。不管怎样，经过几天的努力，我终于找到了一个有效的解决方案。起初，我认为解决方案将使用ffmpeg，然而，虽然它确实起作用，但速度非常慢。我最终找到了名为mtn（Movie Thumbnailer）的linux工具（在Windows中也可用）。这个工具能够在大约6秒内从两小时的电影中创建一个精灵图像。我使用php中的shell_exec函数和-v（verbose）选项解析每个缩略图的时间，如下所示：

mtn -v -P -s 60 .jpg file.ext 2>&1

到了那里，创建必要的WebVTT文件需要简单的逻辑、解析和数学。所有这些都是在php本机中完成的，唯一的例外是必须将mtn与shell_exec一起使用

这个解决方案非常有效，而且非常准确。唯一真正的问题是，用户必须等待几秒钟才能观看视频。我目前正在考虑先加载视频，在背景中生成缩略图，并在准备好后将其合并到视频源中的选项

---

我希望此解决方案能够帮助其他需要为视频播放器动态生成缩略图的人。

事实上，BrightCove提供了一个基于VideoJS的插件，用于显示缩略图。请参见GitHub上的此处：

这里的基本海报似乎倾向于实时生成图像 并注意到：

“唯一真正的问题是，用户必须等待几秒钟才能观看视频。”

除非我遗漏了什么，否则最好直接离线生成所需的VTT文件（缩略图信息）

编辑：选择脱机进行提取具有额外的优势 健壮的工具“ffmpeg”似乎是一个明确的选择。（在评估了建议的、不成熟的“mtn”工具后，我拒绝了它，因为我无法阻止它跳过/省略镜头。）

编辑：BrightCove有很好的示例代码和解释，包括如何 使用视频“精灵”更有效地做事。请看这里：

编辑：[我正计划开发这样一个示例，并将进行更新 当我完成这项工作时，我会给出这个答案……请继续关注。]

编辑：我终于完成了实现视频“缩略图”的方法。。。在这里：

---

这很有见地，它是否在线生成缩略图？不，它们是离线生成的。我的实现writeup就在这里：如果您提供实际的代码供其他人使用，它将更有帮助。这是非常模糊的<代码>一旦到了那里，创建必要的WebVTT文件需要简单的逻辑、解析和数学

mtn -v -P -s 60 .jpg file.ext 2>&1