video.js - videojs-thumbnails 插件在不正确的时间显示缩略图

Question

我正在尝试使用https://github.com/brightcove/videojs-thumbnails中的“videojs-thumbnails”插件，并注意到插件配置中指定的缩略图时间与搜索栏中的时间戳不匹配。遇到有关此问题的不同评论时，我在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);

现在一切正常。非常感谢您的评论/建议。

标签： video.js

Answer 1

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

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

而且，我没有尝试从视频中实时提取图像（请参阅： 如何生成用于 VideoJS 的视频预览缩略图？），我选择使用 'ffmpeg' 和 cmd 提前准备图像'ImageMagick' 的-line 接口。该部分的详细信息在这里： http ://weasel.firmfriends.us/GeeksHomePages/subj-video-and-audio.html#implementing-video-thumbnails

我基于这种方法的“概念验证”网页在这里： https ://weasel.firmfriends.us/Private3-BB/

我希望这是有帮助的。