使用具有的Video.js缩略图多个缩略图精灵(Using multiple thumbnail s

我试图使用的Video.js缩略图显示寻求预览缩略图鼠标悬停在我的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缩略图码这种方式可能不是可行的我。关于任何帮助，这将不胜感激。如果您有关于整合的寻找预览缩略图显示或更好的方式来做到这一点其他球员有什么建议，这些也将不胜感激。

与有点缩略图代码的工作后，我发现了一种方式来获得我需要的结果。该更新IMG SRC的缩略图代码的部分看起来是这样的：

  // apply updated styles to the thumbnail if necessary
  mouseTime = Math.floor(event.offsetX / progressControl.width() * duration);
  for (time in settings) {
    if (mouseTime > time) {
      active = Math.max(active, time);
    }
  }
  setting = settings[active];
  if (setting.src && img.src != setting.src) {
    img.src = setting.src;
  }
  if (setting.style && img.style != setting.style) {
    extend(img.style, setting.style);
  }

从本质上讲，我需要检查针对当前mouseTime所需的源源的电流IMG SRC。所以我增加了一个额外的检查，看起来像这样：

  var x = Math.floor(mouseTime / 300);
  x = x * 300;

  var sourceNeeded = settings[x];

  if (setting.src && (img.src != setting.src)) {

    img.src = setting.src;               
  }
  if (sourceNeeded.src && (img.src != sourceNeeded.src)) {               

    img.src = sourceNeeded.src;
  }
  if (setting.style && img.style != setting.style) {
    extend(img.style, setting.style);
  }

从上面的硬编码300来自于我的精灵张含300秒钟的缩略图的事实。（注意，在在原来的职位我用60代替的例子中）的X变量确定在th_object为适当的源位置的索引，并且如果不匹配当前IMG SRC，我更新。这将允许从一个IMG SRC适当的过渡到另一个需要。

希望这将有助于有人在今后类似的情况。