videojs-thumbnails 插件在错误的时间显示缩略图

Question

我正在尝试使用来自https://github.com/brightcove/videojs-thumbnails 的“videojs-thumbnails”插件，并注意到插件配置中指定的缩略图时间与搜索栏中的时间戳不匹配。遇到有关此问题的不同 cmets，我在 https://github.com/brightcove/videojs-thumbnails/issues/43 找到了替换行的建议

mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);

到

mouseTime = Math.floor((left) / progressControl.width() * duration);

通过删除

- progressControl.el().offsetLeft

但是，这仍然会产生不精确的时间匹配。 最后我为

重新定义了值

var left 

从当前值获取

.vjs-mouse-display

所以，我的最终代码是：

left=parseInt((document.querySelector('.vjs-mouse-display').style.left),10);
mouseTime = Math.floor((left) / progressControl.width() * duration);

现在一切正常。 非常感谢 cmets/建议。

Answer 1

这不是对您特定问题/问题的回答，而是另一种实施方法。

我也想要我的视频的缩略图，所以我制作了一个页面原型 使用了videoJS的插件。我不记得所有细节 我在尝试使用该插件时遇到的问题，但我最终决定 放弃插件，并设计一个替代品，它有自己的 在查看器上方单独的“滑块”。 [一个人'拖动'我的滑块， （而不是像在 YouTube 的视频上那样悬停在它上面），这样它 可以直接在触摸屏上工作......即在Android等]

而且，与其尝试从视频中实时提取图像， （参见：How to generate video preview thumbnails for use in VideoJS?），我选择使用“ffmpeg”和“ImageMagick”的命令行界面提前准备图像。 该部分的详细信息在这里： http://weasel.firmfriends.us/GeeksHomePages/subj-video-and-audio.html#implementing-video-thumbnails

我基于该方法的“概念验证”网页如下： https://weasel.firmfriends.us/Private3-BB/

我希望这会有所帮助。