About
You can show preview thumbnails on the seek bar through the player’s Advanced Settings. This configuration is not exposed in the standard Player Studio interface.
Use this setting to display thumbnail previews when users hover over the timeline.
Access the advanced settings
VOD Audio Reels
- Log into your KMC and click the Studio tab.
- Click the player you want to edit from the list (or use the search bar in the top right).
- Scroll to the bottom of the player settings and click Advanced Settings.
The Player Studio page displays.
If you haven't created a player yet, check out our article Create a player for guidance.
The player settings display.
The Advanced Settings editor displays.
Show preview thumbnails on seek bar
- In the Advanced Settings tab, hover over ui then click the green + icon.
- In the Key Name box, enter:config.ui.components.seekbar.thumbsSprite, then click the green checkmark or press 'Enter'.
- Hover over the setting and click the green edit icon.
- Remove the null value and paste in the URL of your thumbnail image, then click the green checkmark.
- Click Save at the top right before exiting.
You see the new setting listed.
A box containing a null value displays.
The string displays.
To disable this feature, enter an empty string (' ') in the value field, and click Save.
If the setting doesn't appear after saving, try refreshing the page.
Optional: Adjust thumbnail display settings
You can fine-tune how thumbnails appear using the following keys:
Thumbnail width
Key Name: config.ui.components.seekbar.thumbsWidth
Example value: 164
Thumbnail height
Key Name: config.ui.components.seekbar.thumbsHeight
Example value: 92
Number of slices (frames)
Key Name: config.ui.components.seekbar.thumbsSlices
Example value: 100
Each slice represents a frame in the preview. More slices create a more precise timeline preview.
