将多个缩略图精灵与 Video.js 缩略图一起使用 [英] Using multiple thumbnail sprites with Video.js Thumbnails

问题描述

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

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

th_object = {0:{src: 'source001.jpg',风格: {左:'-40px'，宽度:'4800px'，高度:'45px'，剪辑: 'rect(0, 80px, 45px, 0)'}},5:{风格: {左:'-120px'，剪辑:'rect(0, 160px, 45px, 80px)'}},...}

当需要更改精灵源时(比如大约 60 秒的视频)，我使用相同的对象:

<代码> ...60:{src: 'source002.jpg',风格: {左:'-40px'，宽度:'4800px'，高度:'45px'，剪辑:'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);可见性:visible;>

当我在进度条上移动鼠标时，值会更新并且我的源最终会改变.我不完全确定这两个图像都被加载到页面上，因为当我检查页面元素时，在任何给定时间只有一个可见.

当我将鼠标悬停在应加载非第一个精灵表作为缩略图源的位置时，源似乎卡住了.因此，如果我将鼠标移回应该加载第一个精灵表的位置，则不会，并且视频中该点会显示错误的精灵.

我的第一个想法是我的精灵表源需要不同的 HTML 元素，但我是 Web 开发的新手，因此以这种方式修改 Video.js 缩略图代码对我来说可能不可行.任何有关这方面的帮助将不胜感激.如果您对包含搜索预览缩略图显示的其他播放器有任何建议或更好的方法来完成此操作，我们也将不胜感激.

解决方案

在使用 Thumbnails 代码一段时间后，我发现了一种获得所需结果的方法.更新缩略图的 img src 的代码部分如下所示:

//如有必要，将更新的样式应用到缩略图mouseTime = Math.floor(event.offsetX/progressControl.width() * duration);for(设置中的时间){如果(鼠标时间>时间){active = Math.max(active, time);}}设置 = 设置[活动];如果 (setting.src && img.src != setting.src) {img.src = 设置.src;}if (setting.style && img.style != setting.style) {扩展(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 = 设置.src;}if (sourceNeeded.src && (img.src != sourceNeeded.src)) {img.src = sourceNeeded.src;}if (setting.style && img.style != setting.style) {扩展(img.style，setting.style)；}

上面的硬编码 300 来自于我的精灵表包含 300 秒的缩略图这一事实.(请注意，在我原来的帖子中的示例中，我使用了 60.) x 变量确定了 th_object 中正确源位置的索引，如果它与当前的 img src 不匹配，我会更新它.这将允许根据需要从一个 img src 正确转换到另一个.

希望这能帮助将来遇到类似情况的人.

I'm trying to use Video.js Thumbnails to display seek-preview thumbnails when hovering over my Video.js player track bar. I have extracted thumbnails from my videos to sprite sheets using ffmpeg. Each sprite sheet holds a set number of thumbnails, and when one gets filled up during thumbnail extraction, a new sprite file is created.

On my video player page, I am using javascript to create an object to load into the thumbnails() function. If I wanted thumbnails for every five seconds, my object may look something like:

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

When it is time to change sprite sources (say around 60 seconds of video), I am using the same object:

  ...
  60: {
    src: 'source002.jpg',
    style: {
      left: '-40px',
      width: '4800px',
      height: '45px',
      clip: 'rect(0, 80px, 45px, 0)'
    }
  },
  ...

Then I call the thumbnails() function for my video player (called "video" here):

video.thumbnails(th_object);

So, what this is doing is creating a placeholder in my page for the thumbnails and loading the source image and offsetting it, cropping the parts of the sprite that don't need to be shown. But there is only one placeholder being created in the page. For example, an excerpt from my HTML might look like:

<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>

As I move the mouse across the progress bar, the values get updated and my source will eventually change. I am not entirely sure that both images are being loaded on the page, as when I inspect the page elements, there is only one visible at any given time.

When I hover the mouse to a point when a non-first sprite sheet should be loaded as the thumbnail source, the source seems to get stuck. So if I moved the mouse back to a point where the first sprite sheet should be loaded, it won't, and the wrong sprite is displayed for that point in the video.

My first thought is that I need different HTML elements for my sprite sheet sources, but I am new to web development, so modifying the Video.js Thumbnail code this way may not be viable for me. Any help concerning this would be greatly appreciated. If you have any suggestions about other players that incorporate a seek-preview thumbnail display or a better way to accomplish this, those would also be greatly appreciated.

解决方案

After working with the Thumbnails code for a bit, I discovered a way to get the results I need. The portion of the code that updates the img src for the thumbnails looks like this:

  // 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);
  }

Essentially, I needed to check the current img src against the source source required by the current mouseTime. So I added an extra check that looks like this:

  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);
  }

The hard-coded 300 from above comes from the fact that my sprite sheets contained 300 seconds worth of thumbnails. (Note that in the example in my original post I used 60 instead.) The x variable determines the index in th_object for the proper source location, and if that doesn't match the current img src, I update it. This will allow proper transition from one img src to another as needed.

Hopefully this will help someone in a similar situation in the future.

这篇关于将多个缩略图精灵与 Video.js 缩略图一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！