{"id":1522,"date":"2023-04-24T12:41:18","date_gmt":"2023-04-24T10:41:18","guid":{"rendered":"https:\/\/websites.fraunhofer.de\/video-dev\/?p=1522"},"modified":"2023-04-24T12:41:20","modified_gmt":"2023-04-24T10:41:20","slug":"good-things-come-to-those-who-wait-thumbnail-support-for-exoplayer","status":"publish","type":"post","link":"https:\/\/websites.fraunhofer.de\/video-dev\/good-things-come-to-those-who-wait-thumbnail-support-for-exoplayer\/","title":{"rendered":"Good things come to those who wait: Thumbnail support for ExoPlayer"},"content":{"rendered":"\n

The initial request to support preview images or so-called thumbnails in ExoPlayer was made in a GitHub issue<\/a> in 2018. Throughout the years many requests and upvotes for this feature were seen. More than five years later we are happy to announce that our pull request was merged into Google’s open source ExoPlayer<\/a> project with version r2.18.3<\/a>. Thanks to our friends from Deutsche Telekom and Zattoo for supporting this activity! <\/p>\n\n\n\n

<\/p>\n\n\n\n

A thumbnail image is displayed for a future play position (01:34) in the dash.js reference UI<\/em><\/p>\n\n\n\n

What are thumbnails? Thumbnails in video players are little preview images, which are displayed once the user starts scrubbing over the seek bar. Users are accustomed to this feature from any video streaming service. The thumbnail images themselves are typically produced during the packaging process of a MPEG-DASH stream from single video frames. <\/p>\n\n\n\n

The signaling of thumbnail images for MPEG-DASH streams is specified in the DASH-IF IOP guidelines v4.3<\/a> section 6.2.6 \u201cTiles of thumbnail images\u201d: \u201cFor providing easily accessible thumbnails with timing, Adaptation Sets with the new @contentType<\/em>=”image” may be used in the MPD\u201d. This is an example how they can be signalled in a MPEG-DASH MPD:<\/p>\n\n\n

\n
\"\"
DASH-IF test vector with two different thumbnail resolutions<\/em> <\/figcaption><\/figure>\n<\/div>\n\n\n

This example is a little bit more advanced, because it provides two different thumbnail resolutions as Representations in an AdaptationSet. Furthermore, the tiles are grouped differently (10×20 vs. 8×8). Typically one Representation is sufficient for most streaming services.<\/p>\n\n\n

\n
\"\"
Approach for thumbnail support in ExoPlayer. Providing the thumbnail image URL with the corresponding metadata via an API<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

Our pull request<\/a> that was merged into ExoPlayer is responsible for parsing of Adaptation Sets with @contentType<\/em>=”image”, their tile count and the URLs to the thumbnails themselves. The visualization of the thumbnails in the demo UI was out of scope. However, you will find an example of the demo UI implementation including thumbnails in our fork<\/a>. <\/p>\n\n\n\n

Mainly, have a look at DefaultThumbnailProvider and DefaultThumbnailTimeBar, which are used in PlayerActivity to show a time bar which displays thumbnail images above. Feel free to contact us if you need support.<\/p>\n\n\n\n

Below is a recording of our implementation in the demo application of the ExoPlayer:<\/p>\n\n\n\n