ChapterInformation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

TheChapterInformation interface of theMedia Session API represents the metadata for an individual chapter of a media resource (i.e., a video or audio file).

The chapter information for a given media resource is set when it is first created, via thechapterInfo property of theMediaMetadata() constructor's initialization object. The property takes an array ofChapterInformation objects as its value.

You can access the chapter information for an existingMediaMetadata object via itschapterInfo property. This returns an array ofChapterInformation objects.

Instance properties

ChapterInformation.artworkRead onlyExperimental: Returns an Array of objects representing images associated with the chapter.
ChapterInformation.startTimeRead onlyExperimental: Returns a number, in seconds, representing the start time of the chapter.
ChapterInformation.titleRead onlyExperimental: Returns a string representing the title of the chapter.

Examples

The sample code below fromVideo / Media Session Sample shows a typical structure for theChapterInformation object:

const BASE_URL = "https://storage.googleapis.com/media-session/";const metadata = {  // …  chapterInfo: [    {      title: "Chapter 1",      startTime: 0,      artwork: [        {          src: `${BASE_URL}sintel/chapter1-128.png`,          sizes: "128x128",          type: "image/png",        },        {          src: `${BASE_URL}sintel/chapter1-512.png`,          sizes: "512x512",          type: "image/png",        },      ],    },    {      title: "Chapter 2",      startTime: 37,      artwork: [        {          src: `${BASE_URL}sintel/chapter2-128.png`,          sizes: "128x128",          type: "image/png",        },        {          src: `${BASE_URL}sintel/chapter2-512.png`,          sizes: "512x512",          type: "image/png",        },      ],    },  ],};

The following snippet shows how it can be used inside Media Session code (the above object property is part of theplaylist object referenced below):

function updateMetadata() {  const track = playlist[index];  log(`Playing ${track.title} track...`);  navigator.mediaSession.metadata = new MediaMetadata({    title: track.title,    artist: track.artist,    artwork: track.artwork,    chapterInfo: track.chapterInfo,  });  // …}