Skip to main content
Version: 7.3.0

How to implement preview thumbnails in THEOplayer

This article describes how to enable preview thumbnails. In THEOplayer this is done with the TextTrack API.


Web SDKAndroid SDKiOS SDKtvOS SDKAndroid TV SDKChromecast SDK

A demo/example of the preview thumbnails on the THEOplayer Web SDK can be found at

Code examples

The thumbnails are loaded as a separate text track, by setting it as a sideloaded textTrack in the SourceDescription:

player.source = {
sources: {
type: 'application/x-mpegurl',
src: ''
textTracks: [{
default: true,
src: '',
label: 'thumbnails',
kind: 'metadata'
Android SDK

You can add/edit your SourceDescription as follows.

public static final SourceDescription BBB_WITH_THUMBNAILS =
new SourceDescription.Builder("")
.textTracks(new TextTrackDescription.Builder("")
iOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x)

You can edit or add the SourceDescription below.

player.source = SourceDescription(
source: TypedSource(
src: "",
type: "application/x-mpegurl"
textTracks: [TextTrackDescription(
src: "",
srclang: "en",
isDefault: true,
kind: TextTrackKind.metadata,
label: "thumbnails")