Using multiple thumbnail sprites with Video.js Thumbnails

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/18882356/using-multiple-thumbnail-sprites-with-video-js-thumbnails

标签

javascript

html

css

thumbnails

video.js