我转向了 VideoJs (html5),需要弄清楚如何为搜索栏生成缩略图。我试过使用 videojs-thumbnails,但是这需要有一个带有 sprite 图像的预加载 vtt 文件。我正在尝试找出一种自动加载常规 mp4 (h264) 文件缩略图的方法。 Flowplayer 能够用它自己的视频做到这一点,现在正在尝试弄清楚如何用 VideoJs 做到这一点。
我希望他们是我错过的能够做到这一点的插件,但还没有找到它。我想到的最好办法是从 mp4 文件中提取缩略图,将其组合成 Sprite 图像,然后使用 #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>
示例 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
最佳答案
事实上,BrightCove 开发了一个基于 VideoJS 的缩略图显示插件。在 GitHub 上查看:
https://github.com/brightcove/videojs-thumbnails/blob/master/example.html
这里的 base-poster 似乎更倾向于实时生成图像 并注意以下几点:
“唯一真正的问题是用户必须等待几秒钟才能观看视频。”
除非我遗漏了什么,否则最好直接离线生成所需的 VTT 文件(缩略图信息)。
编辑:选择离线提取有额外的优势 强大的工具“ffmpeg”似乎是明智的选择。 (在评估了建议的不成熟的“mtn”工具后,我拒绝了它,因为我永远无法阻止它跳过/遗漏镜头。)
编辑:BrightCove 有很好的示例代码和解释,包括如何 使用视频“ Sprite ”更有效地做事。看这里: https://support.brightcove.com/display-thumbnail-previews-plugin#Example
编辑:[我正计划开发这样一个例子,并将更新 当我完成这项工作时,这个答案......敬请期待。]
编辑:我终于完成了为视频实现“缩略图”的方法……它在这里: https://weasel.firmfriends.us/Private3-BB/
关于html - 如何生成用于 VideoJS 的视频预览缩略图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52900022/