How to implement preview thumbnails in THEOplayer
This article describes how to enable preview thumbnails. In THEOplayer this is done with the TextTrack API.
SDKs
Web SDK | Android SDK | iOS SDK | tvOS SDK | Android TV SDK | Chromecast SDK |
---|---|---|---|---|---|
Yes | Yes |
A demo/example of the preview thumbnails on the THEOplayer Web SDK can be found at http://demo.theoplayer.com/preview-thumbnails
Code examples
The thumbnails are loaded as a separate text track, by setting it as a sideloaded textTrack in the SourceDescription:
Web SDK
player.source = {
sources: {
type: 'application/x-mpegurl',
src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8'
},
textTracks: [{
default: true,
src: 'https://cdn.theoplayer.com/dash/theoplayer/thumbnails/big_buck_bunny_thumbnails.vtt',
label: 'thumbnails',
kind: 'metadata'
}]
}
Android SDK
You can add/edit your SourceDescription as follows.
public static final SourceDescription BBB_WITH_THUMBNAILS =
new SourceDescription.Builder("https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8")
.textTracks(new TextTrackDescription.Builder("https://cdn.theoplayer.com/dash/theoplayer/thumbnails/big_buck_bunny_thumbnails.vtt")
.isDefault(true)
.kind(TextTrackKind.METADATA)
.srclang("en")
.label("thumbnails")
.build()
).build();
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: "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8",
type: "application/x-mpegurl"
),
textTracks: [TextTrackDescription(
src: "https://cdn.theoplayer.com/dash/theoplayer/thumbnails/big_buck_bunny_thumbnails.vtt",
srclang: "en",
isDefault: true,
kind: TextTrackKind.metadata,
label: "thumbnails")
]
)