如何像在 youtube 中一样在 js 视频播放器中制作拇指图片？答案

【问题标题】：How to make thumb pictures in js video player like in youtube?如何像在 youtube 中一样在 js 视频播放器中制作拇指图片？
【发布时间】：2020-02-22 13:06:59
【问题描述】：

我在 npm 中没有找到任何一个库，它可以为我们提供带有缩略图视图的 video-seek-slider。因此我不明白，我应该怎么做：

如何在前端提供拇指图片？
在哪里可以找到已经实现显示拇指 onMouseOver 事件的任何 npm 客户端进度？

有人可以支持我解决这个问题吗？

【问题讨论】：

标签： video video.js video-player video-thumbnails

【解决方案1】：

大约一年前，我在这个确切的问题上苦苦挣扎。基于线程在这里：How to generate video preview thumbnails for use in VideoJS? 我终于得出结论去离线生成缩略图，因为它是比尝试即时提取它们要容易得多。

我在这里对这场斗争进行了技术讨论/解释： http://weasel.firmfriends.us/GeeksHomePages/subj-video-and-audio.html#implementing-video-thumbnails

我的原型示例在这里：https://weasel.firmfriends.us/Private3-BB/

另外，我无法解决如何绑定到 video-js 中现有的搜索栏，所以我添加了自己的专用滑块来查看缩略图。那决定主要基于是否需要使用“悬停”/“onMouseOver” 想用video-js的seekbar，那些手势不翻译以及触摸屏（移动设备）。

干杯。希望这会有所帮助。

编辑：我已经升级了我之前的实现（我添加了自己的专用滑块，因为我不明白如何从 VideoJS 的内置搜索栏获取行为。）

我现在可以使用内置的搜索栏了。
原型实现（仍然）在这里： https://weasel.firmfriends.us/Private3-BB/

【讨论】：