Question

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

我希望他们是我错过的某个插件，能够执行此操作，但尚未找到它。我发现最好的方法是从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

很惊讶，我没有得到任何评论/答案。无论哪种方式，花了几天的时间我都可以找到一个可行的解决方案。起初我以为解决方案将使用ffmpeg，但是尽管它确实起作用，但速度却非常慢。我最终发现找到here名为mtn（电影缩略图）的linux工具（也可在Windows中使用）。该工具能够在大约6秒钟内从两小时的电影中创建精灵图像。我将PHP中的shell_exec函数与-v（详细）选项一起使用，以便解析出每个缩略图的时间，例如：

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

从那里开始，创建必需的WebVTT文件只需简单的逻辑，解析和数学运算。所有这些都是在php中本机完成的，除了必须在shell_exec中使用mtn。

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

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

Answer 2

事实上，有一个基于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/

如何生成视频预览缩略图以在VideoJS中使用？

2 个答案: