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.
var conf = {
key: '<YOUR PLAYER KEY>'
};
var source = {
dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
hls: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
progressive: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
poster: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/poster.jpg',
thumbnailTrack: {
url: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt'
}
};
var playerContainer = document.getElementById('player-container');
var player = new bitmovin.player.Player(playerContainer, conf);
player.load(source);
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:
thumbnailTrack: {
url: 'https://path/to/thumbnail/vtt/file.vtt'
}To set up your video player with thumbnails have a look at this article for a description of the thumbnails you can use with Bitmovin Player.
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.