<img src="https://img.shields.io/badge/%20-ENTERPRISE-%23B10031" 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.


Preview thumbnail appearing on top of a media asset.

<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 />

<!-- Removes the automatic page-to-page navigation at the bottom of the page -->

<style> .rm-Pagination { display: none; } </style>