2

Looking at the JWPlayer documentation for Preview Thumbnail Tooltips through VTT files, the browser appears to download all thumbnail images specified in the VTT file on page load.

I want to provide a thumbnail for each second of the video, however I would like for the client browser to load the thumbnail files only when the user is hovering over the relevant time point. (For a 60-minute video, it doesn't make sense for the browser to have to download 3600 images on page load.)

How is this accomplished?

Brandon
  • 13,956
  • 16
  • 72
  • 114
  • It is only loaded when the player is set up. – emaxsaun May 19 '15 at 17:47
  • On top of that, for a 60-minute video, it doesn't make sense to have thumbnail images for every second of the video. Overkill, much? – MisterNeutron May 19 '15 at 20:04
  • @MisterNeutron same thing that YouTube does, we have them anyway, just making them available to the user doesn't seem like too much of a stretch... just overkill if we make them download all of them. – Brandon May 19 '15 at 21:17
  • Well then, I guess you're going to have to make a choice. Either provide 3600 thumbnails and have them all download, or provide fewer than that. Or maybe just post your videos on YouTube. The bottom line is that JW Player has no way of holding off the download until the user starts hovering. – MisterNeutron May 20 '15 at 00:21
  • Indeed, we don't have a way to do that. – emaxsaun May 20 '15 at 00:54

1 Answers1

0

I think the article you linked to (http://support.jwplayer.com/customer/portal/articles/1407439-adding-preview-thumbnails) must have been updated since asking this question. As of my posting JW Player supports using a single sprite that (as best as I can tell) only loads once the video starts playing. So your VTT file looks something like:

WEBVTT

00:00.000 --> 00:05.000
/assets/thumbnails.jpg#xywh=0,0,160,90

00:05.000 --> 00:10.000
/assets/preview2.jpg#xywh=160,0,320,90

00:10.000 --> 00:15.000
/assets/preview3.jpg#xywh=0,90,160,180

00:15.000 --> 00:20.000
/assets/preview4.jpg#xywh=160,90,320,180

Except the example they provide isn't very good because you would want to use the same file (also it doesn't seem to like relative URIs). What I do is have ffmpeg generate thumbnails every n seconds with a fixed width then combine them into a single image with imagemagick's convert with +append command. Then knowing the length of the video (can be determined with ffprobe) and the fixed width of the individual thumbnails it is trivial to generate the VTT file.

After I typed this out I see the question is tagged with jwplayer6. I am using version 7; it's quite possible this only applies to the newer version. I'm going to go ahead and post anyway in case someone may find it useful.

Edit: It looks like some other folks have a similar approach for generating a thumbnail sprite with a more in-depth explanation and reusable code for download. My implementation details vary somewhat but the overall idea is basically the same. Worth checking out.

ihaztehcodez
  • 2,123
  • 15
  • 29