# 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
    });
Last Updated: 10/11/2021, 6:56:48 AM