HTML5 Video Thumbnail Seeking

Thumbnail Seeking: Scroll over the timeline in the Bitmovin Player to see the thumbnail seeking feature and jump to any point in the film.

How to set up thumbnail seeking in your Bitmovin Player

Thumbnail seeking is a must have for any video longer than a few minutes. It adds to usability and increases the general QoE (Quality of Experience) dramatically.

Setting it up is very simple with the Bitmovin Player. The thumbnails are loaded into the timeline as a track. All you need to do it tell the player where to find the thumbnail file. Simply add a couple lines into your player configuration code:

  tracks      : [{
    file: 'http://path/to/thumbnail/vtt/file.vtt',
    kind: 'thumbnails'

To set up your video player with thumbnails have a look at this article for a more comprehensive explanation of the Bitmovin Player configuration.

What’s required for a video player with thumbnails

Adaptive Streaming relies on encoding your video into several groups of files (streams) at various different resolutions so that your player can switch between the different streams as required by the device or the bandwidth conditions. The thumbnails also need to be generated in the encoding process. The encoder creates a set of thumbnail images and combines them into one image file called a “Sprite”. this file is linked to the timeline to ensure that each thumbnail image links to the correct point in the video’s timeline. For more information on encoding your videos, have a look at our Cloud Encoding Service. The Bitmovin Encoder will provide you a link that you can ad to your configuration as described above.

Simple Share Buttons