The initial request to support preview images or so-called thumbnails in ExoPlayer was made in a GitHub issue 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 project with version r2.18.3. Thanks to our friends from Deutsche Telekom and Zattoo for supporting this activity!
A thumbnail image is displayed for a future play position (01:34) in the dash.js reference UI
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.
The signaling of thumbnail images for MPEG-DASH streams is specified in the DASH-IF IOP guidelines v4.3 section 6.2.6 “Tiles of thumbnail images”: “For providing easily accessible thumbnails with timing, Adaptation Sets with the new @contentType=”image” may be used in the MPD”. This is an example how they can be signalled in a MPEG-DASH MPD:
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.
Our pull request that was merged into ExoPlayer is responsible for parsing of Adaptation Sets with @contentType=”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.
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.
Below is a recording of our implementation in the demo application of the ExoPlayer:
This was our first official contribution to ExoPlayer. Stay tuned for more!
Prashant Chothani says:
I tried finding this in media3 and does not show up. Even in exoplayer the PR seems to be merged but there is no way to show how can we enable this or customise this. Appreciate your help in advance if you could please help us in this matter
Stefan Pham says:
The UI part was not merged into ExoPlayer. For an example integration into the demo UI, check out this commit: https://github.com/fraunhoferfokus/ExoPlayer/commit/2f8fd87fa2b08ff01155d00d7576cb08aef3c3ae
Prashant M Chothani says:
Thanks Stefan.
In the media3 (exoplayer) is the thumbnail preview built in ? I tried to find documentation and even try with providing the manifest which has the Image Track but the thumbnails do not show up.
Görkem Güclü says:
Hi Prashant,
Media3 ExoPlayer has the same code as the deprecated ExoPlayer, where this was merged into. Our PR included both, the underlying necessary changes for Thumbnails, but also the UI part. Unfortunately, the UI part was removed and is not included in both ExoPlayer versions.
However, you can checkout commit dad74276efdfc7119476a3d62746ba5a0cf3da0e, where the demo app has a functional UI thumbnail scrub bar implemented as an example, before it was removed in a later commit. Simply select a stream from the “Thumbnails” section on the launch screen.