A great new feature in JW Player is the popup of quick preview images when mousing over the timeSlider. This allows viewers to seek to a particular position, or to quickly scan the contents of a video. We call these previews Tooltip Thumbnails. Start this video and rollover the controlbar for a live example:
These Tooltip Thumbnails are loaded in JW Player as external VTT files. The Encoding.com encoding service now has support for this format, which greatly simplifies building these Tooltip Thumbnails for your videos.
The VTT Format
Tooltip Thumbnails are loaded into JW Player using external VTT files, leveraging Web Standards as much as possible:
- The W3C VTT format is a basic, text format that combines timing and thumbnails.
- These thumbnails are stored in a basic image format, like JPG or PNG.
- To reduce file size and load time, multiple thumbs can be combined into a single sprite W3C Media Fragments are then used to map the individual thumbs to the correct times.
Here is an example VTT file. It contains 4 thumbs, each representing 5 seconds of the video. The thumbs are combined in a sprite called thumbnails.jpg:
WEBVTT
00:00.000 --> 00:05.000
/assets/thumbnails.jpg#xywh=0,0,160,90
00:05.000 --> 00:10.000
/assets/thumbnails.jpg#xywh=160,0,320,90
00:10.000 --> 00:15.000
/assets/thumbnails.jpg#xywh=0,90,160,180
00:15.000 --> 00:20.000
/assets/thumbnails.jpg#xywh=160,90,320,180
The JPG Sprite
Here is also an example of an image sprite, containing 16 images. It’s simply a collage of video screenshots glued together:
Using Encoding.com
While VTT files and JPG sprites are easy to create manually, it does take a lot of work. Combining screenshots of a video to a sprite with Photoshop will work if you have a few videos, but for a large library something more automated is required.
Luckily, Encoding.com just released support for rendering VTT/JPG thumbnail tooltips on top of their existing thumbnail extraction functionality. Simply add the option use_vtt=yes to your thumbnail extraction jobs to get the VTT files, either through their API or web interface. The result will be a VTT file and JPG sprite, which are ready to be loaded into JW Player.
Encoding.com is a massive cloud encoding service, supporting various output formats and many controls for fine-tuning encodes. The forever free trial is an ideal way to get started with their service and its new Tooltip Thumbnail support.