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

<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.