Introduction
THEOplayer offers support for preview thumbnails of a video. Preview thumbnails are shown when a viewer hovers the seek bar. This allows for quick scanning and navigating of longer-form content.
Here is an example video with preview thumbnails:
Configuration
WebVTT Format
THEOplayer supports loading of preview thumbnails in WebVTT format. WebVTT is a plain text format, part of the HTML5 standard, that's also used for providing subtitles and closed captions.
These WebVTT files are quite straightforward and contain links to the actual thumbnail images for specific time ranges in the video.
WEBVTT 00:00.000 --> 00:10.000 /thumbnails/thumbnail1.jpg 00:10.001 --> 00:20.000 /thumbnails/thumbnail2.jpg 00:20.001 --> 00:30.000 /thumbnails/thumbnail3.jpg
<track> Element
The WebVTT with the thumbnails can easily be loaded by THEOplayer by adding a <track> element with ‘thumbnails’ as kind to the HTML5 video element.
<video src="big_buck_bunny_metadata.m3u8" controls="controls" poster="poster.jpg"> <track kind="metadata" label="thumbnails" src="thumbnails.vtt"></track> </video>
Image Sprites
Having a separate image for each preview thumbnail is sub-optimal. It is much more memory and bandwidth-friendly to send it as a single image because the number of server requests will be reduced. THEOplayer also supports defining preview thumbnails via image sprites. An image sprite is a collection of images stitched together into a single image.
In the below WebVTT example, for each time range of 10 seconds, the URL of the preview image is given including a spatial Media Fragment hash. This gives information about the exact position in the image sprite of the preview thumbnail for that specific time range.
WEBVTT 00:00.000 --> 00:10.000 thumbnails.jpg#xywh=0,0,100,56 00:10.000 --> 00:20.000 thumbnails.jpg#xywh=100,0,100,56 00:20.000 --> 00:30.000 thumbnails.jpg#xywh=200,0,100,56 00:30.000 --> 00:40.000 thumbnails.jpg#xywh=300,0,100,56 00:40.000 --> 00:50.000 thumbnails.jpg#xywh=400,0,100,56 00:50.000 --> 01:00.000 thumbnails.jpg#xywh=0,56,100,56
Support Table
This feature is supported on all browsers supported by THEOplayer except for iOS.

Internet Explorer 10+

Firefox

Chrome

Safari

Opera

Edge

Windows Phone

Android

Vivaldi