Techdocs

AMP Web SDK

AMP player

Using VTT Chapters

This tutorial shows how to implement chapters based on WebVTT spec.

How to add chapter markers using WebVTT

Adding navigation markers for the video timeline can be done using a WebVTT file. A WebVTT file can consist in chapters that are plain text typically just a single line whose text is interpreted as a chapter title that describes the chapter as a navigation target. See Chapter

WEBVTT FILE

1
00:00:00.000 --> 00:00:10.100
Intro slide

2
00:00:10.100 --> 00:00:20.000
Music 

3
00:00:20.000 --> 00:00:30.000
Prologue

To add chapter markers in AMP a track object must be passed along the media object, indicating the file location, language and kind. Please refer to akamai.amp.Media and akamai.amp.Track to know more about the media and track interfaces.

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/chapters/chapters.vtt",
                type: "text/vtt",
                srclang: "en",
                kind: "chapters"
            }
        ]
    }
};

akamai.amp.AMP.create("amp", config);

Multi-language chapter markers

Alternatively, different languages tracks can be provided into a single media object, making the timeline UI to match the user's preferred language.

var config = {
    autoplay: true,
    autoplayPolicy: "muted",
    media: {
        src: "https://mdtp-a.akamaihd.net/customers/akamai/video/VfE.mp4",
        track: [
            {
                src: "../chapters/bbb-en.vtt",
                type: "text/vtt",
                srclang: "en",
                kind: "chapters"
            },
            {
                src: "../chapters/bbb-es.vtt",
                type: "text/vtt",
                srclang: "es",
                kind: "chapters"
            },
            {
                src: "../chapters/bbb-fr.vtt",
                type: "text/vtt",
                srclang: "fr",
                kind: "chapters"
            }
        ]
    }
};

akamai.amp.AMP.create("amp", config);