# How to implement preview thumbnails on Web

This article describes how you can enable preview thumbnails, which THEOplayer implements through the TextTrack API. The thumbnails are loaded as a separate text track, by side-loading them as a text track in your source description.

A demo of the preview thumbnails on the THEOplayer Web SDK is available at <https://demo.theoplayer.com/preview-thumbnails>.

## Usage

```js
player.source = {
  sources: {
    type: 'application/x-mpegurl',
    src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8',
  },
  textTracks: [
    {
      default: true,
      src: 'https://cdn.theoplayer.com/dash/theoplayer/thumbnails/big_buck_bunny_thumbnails.vtt',
      label: 'thumbnails',
      kind: 'metadata',
    },
  ],
};
```

If you use the [Open Video UI for Web](https://optiview.dolby.com/docs/open-video-ui/web.md) or [THEOplayer's default UI](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/ui/introduction.md), the thumbnails are shown automatically when hovering or scrubbing the seek bar.

## Related articles

* [How to insert subtitles](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/text-tracks/insert-subtitles.md)