将多个缩略图精灵与 Video.js 缩略图一起使用答案

【问题标题】：Using multiple thumbnail sprites with Video.js Thumbnails将多个缩略图精灵与 Video.js 缩略图一起使用
【发布时间】：2013-09-23 19:27:03
【问题描述】：

当我将鼠标悬停在我的 Video.js 播放器轨迹栏上时，我正在尝试使用 Video.js Thumbnails 显示搜索预览缩略图。我已经使用 ffmpeg 从我的视频中提取缩略图到精灵表。每个 sprite 表都包含一定数量的缩略图，当缩略图提取过程中填满时，会创建一个新的 sprite 文件。

在我的视频播放器页面上，我正在使用 javascript 创建一个对象以加载到 thumbnails() 函数中。如果我想要每五秒的缩略图，我的对象可能看起来像：

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)'
    }
  },
  ...

然后我为我的视频播放器（这里称为“视频”）调用 thumbnails() 函数：

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 缩略图代码对我来说可能不可行。任何有关此的帮助将不胜感激。如果您对其他包含搜索预览缩略图显示或实现此目的的更好方法的播放器有任何建议，我们也将不胜感激。

【问题讨论】：

标签： javascript html css thumbnails video.js

【解决方案1】：

在使用缩略图代码一段时间后，我发现了一种获得所需结果的方法。更新缩略图的 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 正确转换到另一个。

希望这对将来遇到类似情况的人有所帮助。

【讨论】：