Adding preview thumbnails using VTT files
This tutorial shows how to implement preview thumbnails in AMPlayer 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.