Getting thumbnails and using it with HLS

[kihulane]

Have you read the Tutorials? Yes

Have you read the FAQ and checked for duplicate open issues? Yes

If the question is related to FairPlay, have you read the tutorial?

Yes

What version of Shaka Player are you using? 3.0.4

What browser and OS are you using? Safari Version 17.5

Please ask your question I'm trying to figure out how the HLS demo with thumbnails works.

Right now (from my application) the only info about thumbnails I'm getting is the I-Frame playlists info from the m3u8 file, but I believe this is the old way? Based on the feat(UI): Add thumbnails to the UI commit - Is the demo app using the .vtt file and parsing/converting the info somehow? Because from the demo app's network tab, i see that they are using .jpg file that includes all the thumbnails.

[avelad]

There are currently 3 ways to have thumbnails in HLS:

1. Use player.addThumbnailsTrack to add an external vtt with jpgs. Eg: https://shaka-player-demo.appspot.com/demo/#audiolang=es-ES;textlang=es-ES;uilang=es-ES;asset=https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8;panel=ALL_CONTENT;panelData=THUMBNAILS,HLS;build=uncompiled --> https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt
2. Use an I-frame-only playlists with the mjpg codec --> https://shaka-player-demo.appspot.com/demo/#audiolang=es-ES;textlang=es-ES;uilang=es-ES;asset=https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8;panel=ALL_CONTENT;panelData=THUMBNAILS,HLS;build=uncompiled
3. Use HLS Image Media Playlist --> Spec: https://github.com/image-media-playlist/spec/blob/master/image_media_playlist_v0_4.pdf

The one recommended by Apple and the HLS spec is the 2nd, the 1st is widely used, the 3rd is a Roku spec that we support but that few streams support.

Has this helped you?

[kihulane]

Last question: Where/how is the external vtt file parsed/converted? because from the demo app network tab, the vtt file is already converted into jpg

[avelad]

The parsing of the file is done by the player itself internally.

[kihulane]

Okay. Thank you for the help.