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

The SDKs support 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.

616


Preview thumbnails gives the user an indication of where they are seeking

<br />

You can define your preview thumbnails in a single **.vtt** file. Set the **.vtt** file with `JWThumbnailTrackBuilder()`, which creates a `JWMediaTrack`. You can then set the `JWMediaTrack` with `JWPlayerItemBuilder()`.

<br />

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

  • URLs must point to individual thumbnail files (**filename.jpg**) or to the <a href="https://www.w3.org/TR/media-frags/#naming-space" target="_blank">spacial media fragment</a> (**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





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

## Add a preview thumbnail

Use the following recipes to associate a preview thumbnail with a player item.

📱
iOS2: Add preview thumbnails
Open Recipe


<br />

(Script tags will be stripped)