[object Object] Icon

Learn how to create, start, manage and modify Encodings

[object Object] Icon

Learn how to create, start, manage and modify Players

[object Object] Icon

Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Thu Feb 03 2022

Player - Thumbnail Preview Support

Thu Feb 03 2022

LegendLink Icon

✅ supported | ✖ not supported | - restricted by platform

1 : Not supported for Live - Supported for VOD only

2 : Not supported for Safari browser

3 : API to retrieve thumbnail for specific time exists. Rendering thumbnail needs to be implemented by application in custom UI

4 : Only supported with default Roku UI

CompatibilityLink Icon

Player SDK/PlatformWebVTT with JPEG/PNG images/sprites + HLS/DASHDASH-IF IOP Image Adaptation SetHLS Image Media PlaylistHLS I-Frame playlistDASH/HLS with BIF(Roku-specific)
iOS (Bitmovin UI)1
iOS (System UI)
tvOS (System UI)
tvOS (Custom native UI)1,3

OverviewLink Icon

The thumbnail preview feature of the player presents the viewer with a thumbnail view of image corresponding to specific playback position in relation to the content being watched. The preview is presented when scrubbing/seeking forwards and backward through the content. Below is a screenshot of thumbnail preview.

Thumbnail Preview

Thumbnails can be created in number of ways by encoders and the format required very much depends on the platform. Below we outline the available formats and support across our Player SDKs as well as our encoding services in conjunction with our player SDKs

WebVTT with JPEG/PNG images/spritesLink Icon

This format consists of WebVTT files referencing JPEG/PNG images or sprites and also providing mapping information to a specific time range in the media corresponding to the referenced image or section of a sprite. This format is agnostic of the stream protocol HLS or DASH. Player SDK downloads the image and exposes the image URL and timing information via an API which is used by Default Bitmovin player UI to render the thumbnail image on progress timeline when user seeks/scrubs forward and backward. The information provided by API can be used to do render thumbnails with a custom UI as well. Please check out details of this format here

Demo/Sample : https://bitmovin.com/demos/thumbnail-seeking

Sample WebVTT thumbnail : https://bitmovin-a.akamaihd.net/content/MI201109210084_1/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt

DASH Image Adaptation Set as specified in DASH-IF IOP (in-manifest)Link Icon

This format consists of DASH AdaptationSet with @contentType="image" as specified in DASH-IF IOP specification in section 6.2.6. Tiles of thumbnail images. AdaptationSet for thumbnail images provide timing and addressing mechanism as for other AdaptationSet for audio and video, allowing mapping of images (or sections in the sprite) to the specific time ranges for playback.

HLS I-Frame playlistLink Icon

This format is based on standard HLS specification as defined at rfc8216 . This is a traditional approach, where the I-Frame playlist provides a sparse track of video frames for a client to use during trick-play and seek operations. The format currently specified by HLS is a coded video I-frame. Since it refers to coded video I-frames, additional video decoding resources are required to process these I-frames for display, which can be problematic in some cases.

HLS Image Media PlaylistLink Icon

This format is an extension of HLS specification to add capability to signal thumbnail information in HLS manifest using custom HLS tag. Specification for this format can be found at image-media-playlist/spec and this is also recommended by Roku in Roku documentation under section HLS considerations. This format makes use of thumbnail images instead of coded I-frames.

DASH/HLS with BIF(Roku-specific)Link Icon

This is a Roku specific thumbnail format. The specification can be found in Roku documentation under section BIF file specification. This format is not used on other platforms.

Give us feedback