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);