# Thumbnails preview.
Preview of the thumbnails
To have a preview of the thumbnails working you need to set the sprite source to the player as follows:
const testSrc = "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8";
const testSprite = {
url: "https://content.you.dev.pixellot.tv/events/612f69a5fd0c9e642be240e1/hd/preview_hd.jpg",
start: 0,
duration: 15,
interval: 12,
width: 160,
height: 90,
}
player.setSrc({ hd: testSrc });
player.setThumbnailsSprites([ testSprite ]);
In case you have both hd and pano sources, than you can also set the thumbnails during source setting as follows:
const testSrc = "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8";
const testSprite = {
url: "https://content.you.dev.pixellot.tv/events/612f69a5fd0c9e642be240e1/hd/preview_hd.jpg",
start: 0,
duration: 15,
interval: 12,
width: 160,
height: 90,
}
player.setSrc({
hd: testSrc,
hdThumbnails: testSprite,
pano: testSrc,
panoThumbnails: testSprite
});