我正在尝试使用Video.js 缩略图 https://github.com/brightcove/videojs-thumbnails将鼠标悬停在我的 Video.js 播放器轨迹栏上时显示搜索预览缩略图。我使用 ffmpeg 将视频中的缩略图提取到精灵表中。每个精灵表都包含一定数量的缩略图,当缩略图提取过程中缩略图被填满时,就会创建一个新的精灵文件。
在我的视频播放器页面上,我使用 JavaScript 创建一个对象以加载到缩略图()函数中。如果我想要每五秒一次的缩略图,我的对象可能看起来像这样:
th_object = {
0: {
src: 'source001.jpg',
style: {
left: '-40px',
width: '4800px',
height: '45px',
clip: 'rect(0, 80px, 45px, 0)'
}
},
5: {
style: {
left: '-120px',
clip: 'rect(0, 160px, 45px, 80px)'
}
},
...
}
当需要更改精灵源时(例如大约 60 秒的视频),我使用相同的对象:
...
60: {
src: 'source002.jpg',
style: {
left: '-40px',
width: '4800px',
height: '45px',
clip: 'rect(0, 80px, 45px, 0)'
}
},
...
然后我调用视频播放器的缩略图()函数(此处称为“视频”):
video.thumbnails(th_object);
因此,它所做的就是在我的页面中为缩略图创建一个占位符,加载源图像并对其进行偏移,裁剪精灵中不需要显示的部分。但页面中只创建了一个占位符。例如,我的 HTML 的摘录可能如下所示:
<div class="vjs-thumbnail-holder" style="left: 157px;">
<img src="/storage/source001.jpg" class="vjs-thumbnail" style="left: -680px; width: 4800px; height: 45px; clip: rect(0px 720px 45px 640px); visibility: visible;">
</div>
当我将鼠标移过进度条时,值会更新,我的源最终也会改变。我并不完全确定这两个图像都已加载到页面上,因为当我检查页面元素时,在任何给定时间都只有一个可见。
当我将鼠标悬停在应加载非第一个精灵表作为缩略图源的位置时,源似乎卡住了。因此,如果我将鼠标移回应加载第一个精灵表的位置,则不会,并且视频中该点会显示错误的精灵。
我的第一个想法是我的精灵表源需要不同的 HTML 元素,但我是 Web 开发的新手,因此以这种方式修改 Video.js 缩略图代码对我来说可能不可行。任何有关此的帮助将不胜感激。如果您对其他包含搜索预览缩略图显示的播放器有任何建议或更好的方法来实现此目的,我们也将不胜感激。