<img src="https://img.shields.io/badge/%20-ENTERPRISE-%23B10031" style="float:left"/><br /> <img src="https://img.shields.io/badge/Android-V4-009727?logo=android" style="float:left"/>

<br />

JWP supports the loading of preview thumbnails for individual shots or scenes in a video. These thumbnails are displayed in a tooltip when a viewer hovers the control bar.

<br /> <hr />

## Preview thumbnail overview

In the Android SDK, you define your preview thumbnails in a single .vtt file. The .vtt file is part of a thumbnail `Caption` that is assigned to a `PlaylistItem`.

For an optimal user experience, the thumbnails should adhere to the following:

• URLs must point to individual thumbnail files (**filename.jpg**) or to the [spacial media fragment](🔗) (**filename.jpg#xywh=0,0,120,90**) in a thumbnail sprite

• URLs must be relative to the .vtt file

• Thumbnail width of 100-150 px

<br />

📘



When a media asset is uploaded to your JWP account, a thumbnail track file is created as part of the transcoding process. So, instead of creating a new **.vtt** file for a video asset, you can copy the URL of the thumbnail track file from your JWP dashboard.

To locate the thumbnail track of a specific video asset, follow these steps:

1. Click the name of the video in your JWP dashboard [Media Library](🔗).

2. Under **Media Summary**, click the **View Assets**.

3. On the **Tracks** tab in the **Thumbnail Preview** row, click <strong>∨</strong> to reveal the **DIRECT URL**.

4. Copy the **DIRECT URL**.

5. Click **Close**.

<br /> <hr />

## Adding preview thumbnails to an app

1. In your main activity, create a `List<Caption>` object and name it, for example, `thumbnailTrack`.

2. Create a `Caption` object and name it, for example, `previewThumbnail`.

3. In the `Caption` object, define the preview thumbnail .vtt file URL (`file`). You can use the .vtt file mentioned in the TIP box above that JWP creates during the transcoding process.

4. Define the `Caption` object as a thumbnail track (`kind(THUMBNAILS)`)

5. Add `previewThumbnail` to `thumbnailTrack`.

6. Add `thumbnailTrack` to a `PlaylistItem` object.

7. (Optional) Add `thumbnailPreview` to `PlayerConfig` to configure the appearance of the thumbnail preview.<br /><br />The default setting is `THUMBNAIL_PREVIEW_TEXT_AND_IMAGE`. You can also configure the thumbnail preview as text-only (`THUMBNAIL_PREVIEW_TEXT`) or image-only (`THUMBNAIL_PREVIEW_IMAGE`).

<br />

### Add preview thumbnails to existing captions

If you have an existing [captions](🔗) track, you should add preview thumbnails to that existing `tracks` list. Creating a new `tracks` list for preview thumbnails will cause only the most recently added `track` to load.

The following code example illustrates how a preview thumbnail can be added to an existing caption track setup and associated with a playlist through `PlaylistItem.Builder()`.

<br />