×
Menu

Display thumbnails over the seek bar to show a preview of the video at seeked time

Hover over the timeline of the Bitmovin Player to see the thumbnail seeking feature in action.

const conf = {
  key: '<YOUR PLAYER KEY>',
  source: {
    dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
    hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
    progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
    poster: 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/art-of-motion_poster.jpg',
    tracks: [{
      file: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt',
      kind: 'thumbnails'
    }]
  }
};

const player = bitmovin.player('player');
player.setup(conf);

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 increases usability and the general QoE (Quality of Experience) dramatically.

Setting up is simple with the Bitmovin Player. Thumbnails are loaded into the timeline as a track. All you need to do is to tell the player the location of the thumbnail file:

tracks: [{
  file: 'https://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 resolutions, while thumbnails also need to be generated in the encoding process. The encoder creates a set of thumbnail images and combines them into a single image file (“Sprite”). For more information on encoding your videos, have a look at our Cloud Encoding Service.

Create an account to get started!

No credit card required.