Video Thumbnails (Tooltip) / WebVTT - Thumbnails | Clips | WS.WebTV Documentation | WebTV Solutions

Print

Video Thumbnails (Tooltip Thumbnails)

WS.WebTV supports video thumbnails; which is a preview made of images of a video. The preview is displayed in a tooltip (mini window) when a user hovers the progress bar of the video player. This allows to do a "visual seek" and it is specially useful for locating a specific time in long-length videos.

Requirements/Formats

In order to add video thumbnails to a Clip two files are required:

1. A Sprite: Single image (JPG, PNG or GIF format)...
A sprite is a single image file which contains all the video preview thumbnails.
Example of video thumbnails image file (sprite):


2. A WebVTT file (.vtt)...
WS.WebTV uses "WebVTT " files in order to display the individual video thumbnails. A WebVTT file is a plain text format that contains links to the thumbnail image file, as well as the coordinates of each individual thumbnail.
Please, note that the WebTV will only "read" the coordinates from the WebVTT file, and ignore the image file link, because it will use the image uploaded from the Content Administration interface.
Example of WebVTT (.vtt) file:
WEBVTT

00:00:00.000 --> 00:00:01.000
thumbs_sample.jpg#xywh=321,1,160,90

00:00:01.000 --> 00:00:02.000
thumbs_sample.jpg#xywh=1,91,160,90

00:00:02.000 --> 00:00:03.000
thumbs_sample.jpg#xywh=321,91,160,90

00:00:03.000 --> 00:00:04.000
thumbs_sample.jpg#xywh=1,181,160,90

00:00:04.000 --> 00:00:05.000
thumbs_sample.jpg#xywh=481,181,160,90

... As you can see, the structure of the VTT file is pretty simple; it consists of a list of cues, each cue has:
• The range of time the thumbnail represent (respect the video duration).
Note: The time ranges need to be in the following format: (hh:)mm:ss.msmsms (hours:minutes:seconds.milliseconds).
• The name/link of the sprite image, with the coordinates of the thumbnail (remember that the WebTV will only read the coordinates).
Notes: The coordinates are specified using a "spatial Media Fragment ". The image name/link, although it will be ignored, must be included.

Adding the Video Thumbnails Files to a Clip

1. Go to to the Clips page and edit the desired Clip...


2. (In the Properties tab) Supply the image and VTT files through the corresponding fields...
• Image File: The sprite image.
• VTT File: The WebVTT file.


3. Done...
Once you are done click the Save button.

Creating the sprite image + VTT files with Video Thumbnails Maker

Video Thumbnails Maker is a great (and cheap) program that allows you to create automatically, from video files, the corresponding sprite (thumbnails image) and VTT files.

Before processing your video files, the first you need to do is to set the correct settings in "environment" and "options" screens.

Settings for "Environment" screen:
- Env1. Check "Classic" and "WebVTT" checkboxes.
- Env2. Save settings


Settings for "Options" screen:
- Op1. Uncheck "Watermark".
- Op2. Uncheck "Stamp"
- Op3. Uncheck "Tile outlines"
- Op4. Uncheck "Draw Details"
- Op5. Set Tile width = 160 and Tile height = 90; uncheck "Auto Height" and "Fit Screen"
- Op6. Set the appropriate values into the "Thumbnails Layout" section.
Note: These settings will depend on your video duration. You can either configure the program to generate a thumbnail (tile) at a specific time interval or by specifying the "X Tiles" and "Y Tiles" values (for example 5x4 = 20 thumbnails/tiles).
Warning: Generate sprite images of reasonable size. Avoid having more than 100 or 120 thumbnails. More thumbnails will allow a better sampling (for long-length videos), but will result in a bigger sprite image.
- Op7. Save settings


Process your video files:
1) Add files: Either by clicking the "Add Files" button or by dragging the files into the list
2) When ready, Click "Start".
When processing is done, an image and vtt file will have been generated for each video; now upload them to the WebTV as explained above.