How to add custom preview thumbnail

[debjits1]

I have an external API which return the thumbnail image details.

[
...
{
    "name": "http://example.cdn.com/content/entry2000.jpeg",
    "sortTime": 10,
    "time": "10"
  },
  {
    "name": "http://example.cdn.com/content/entry2000.jpeg",
    "sortTime": 20,
    "time": "20"
  },
  ....
  ]

I want to show my custom thumbnail with the above json. How do I achieve this in media-chrome

[luwes]

Thanks for the question!

JSON format is not supported for now, Media Chrome picks up preview thumbnails from a .vtt file like in the example here,
https://github.com/muxinc/media-chrome/blob/main/examples/vanilla/advanced.html#L42-L47

Requires a video track similar to

          <track
            label="thumbnails"
            default
            kind="metadata"
            src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.vtt"
          />

For the best experience and performance the preview image is one big sprite image so it only needs 1 request and Media Chrome will show the correct coordinates based on the xywh hash at the end of the URL.

the contents of the VTT looks a bit like this.

WEBVTT

00:00:00.000 --> 00:00:02.679
https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.jpg#xywh=0,0,384,160

00:00:02.679 --> 00:00:05.358
https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.jpg#xywh=384,0,384,160

00:00:05.358 --> 00:00:08.037
https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.jpg#xywh=768,0,384,160

00:00:08.037 --> 00:00:10.716
https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.jpg#xywh=1152,0,384,160

[gkatsev]

It should be possible to generate this programmatically, but I haven't tested it.

var track = video.createTextTrack('metadata', 'thumbnails');

jsonData.forEach((cue, i) => {
  var vttcue = new VTTCue(cue.time, jsonData[i].time, cue.name);
  track.addCue(vttcue);
});

[gkatsev]

Elsewhere was mentioned that the coordinates were required right now. So, you'd probably want to make set #xywh=0,0,{{image-width}},{{image-height}} at the end of your url. It's something that we'd want to update to not require, though.

But sprite sheets are definitely worth considering using.