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

Question

我转移到 VideoJs (html5) 并需要弄清楚如何为搜索栏生成缩略图。我曾尝试使用 videojs-thumbnails，但这需要预先加载带有精灵图像的 vtt 文件。我试图找出一种方法来自动加载常规 mp4 (h264) 文件的缩略图。Flowplayer 能够用它自己的视频做到这一点，现在试图弄清楚如何用 VideoJs 做到这一点。

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

如果在 VideoJS 中没有自动执行此操作的插件，我可以使用什么命令行程序在 Ubuntu 上创建带有精灵图像的 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>

示例 vtt 文件：

WEBVTT

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68

00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68

Answer 1

事实上，有一个基于 VideoJS 的用于显示缩略图的插件是由 BrightCove 完成的。在 GitHub 上查看这里：

https://github.com/brightcove/videojs-thumbnails/blob/master/example.html

这里的基本海报似乎有利于实时生成图像并注意以下几点：

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

除非我遗漏了一些东西，否则离线生成所需的 VTT 文件（缩略图信息）应该是可取的和直接的。

编辑：选择离线提取还有一个额外的优势，即强大的工具“ffmpeg”似乎是明确的选择。（在评估了建议的和不成熟的“mtn”工具后，我拒绝了它，因为我永远无法阻止它跳过/省略镜头。）

编辑：BrightCove 有很好的示例代码和解释，包括如何使用视频“精灵”更有效地做事。请参阅此处：https : //support.brightcove.com/display-thumbnail-previews-plugin#Example

编辑：[我计划开发这样一个例子，当我完成这项工作时会更新这个答案......敬请期待。]

编辑：我终于完成了为视频实现“缩略图”的方法......它在这里：https : //weasel.firmfriends.us/Private3-BB/

Answer 2

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

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

一旦到达那里，就可以通过简单的逻辑、解析和数学来创建必要的 WebVTT 文件。所有这些都是在 php 中本地完成的，除了必须将 mtn 与 shell_exec 一起使用。

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

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