Techdocs

AMP Web SDK

AMP player

Adding preview thumbnails using VTT files

This tutorial shows how to implement preview thumbnails in AMP using the AMP React Plugin.

AMP Preview Thumbnails Using VTT Files

Adding preview thumbnails to AMPlayer is quite easy. In order to do so add a track for the VTT file inside the media object. Please refer to akamai.amp.Media and akamai.amp.Track to know more about the media and track interfaces.

In the next working example, a track object for our VTT file is provided as a part of the media object. As seen in the example, we include:

  • src : url to the .vtt file.
  • type : MIME type for the file.
  • kind : a string that let's the user agent know how to handle the file. In this case: preview.
var config = {
    autoplay: true,
    autoplayPolicy: "muted",
    media: {
        src: "https://mdtp-a.akamaihd.net/customers/akamai/video/VfE.mp4",
        track: [
            {
                src: "https://mdtp-a.akamaihd.net/preview/VfE.vtt",
                type: "text/vtt",
                kind: "preview"
            }
        ]
    }
};

akamai.amp.AMP.create("amp", config);
Loading Single Image files

Allows to render every single thumbnail image from an external file (PNG, JPEG, GIF). However this approach may show up some delay since every thumbnail requires a XHR request. Below there is a sample of how the VTT file will look like.

WEBVTT
 
00:00:00.000 --> 00:00:10.000
thumb0001.jpg#wh=128,72
 
00:00:10.000 --> 00:00:20.000
thumb0002.jpg#wh=128,72
Loading a Sprite Image file

Allows the player to render all thumbnails from a single image file. The VTT file should include cue information for each one of the thumbnails letting know the player which section from the image should be rendered. Below there is an example using a single sprite file.

WEBVTT
 
00:00:00.000 --> 00:00:10.000
/preview/sprite01.png#xywh=0,0,128,72
 
00:00:10.000 --> 00:00:20.000
/preview/sprite01.png#xywh=0,72,128,72

As can be seen in the example each thumbnail includes xywh information.

Creating Custom Thumbnail UI

In the case that you might want to implement yourself the user interface for the player thumbnails, akamai.amp.Player exposes the attribute previewTracks. previewTracks contains an akamai.amp.TrackList with all preview tracks related to the currently playing media.