Preview Thumbnails in 2.X

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

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.

Big Buck Bunny Sprites

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