IIIF Chapters: Range Navigation

This demo shows automatic chapter navigation from IIIF Range structures. The IIIFPlayer.Root component parses manifest.structures automatically, and IIIFPlayer.Chapters renders them as a navigable list.

Click any chapter to seek the video to that point. The active chapter highlights automatically as playback progresses. Built on IIIF Cookbook recipe 0026 — a table of contents for a video recording of Lully's opera Armide.

<script>
  import { IIIFPlayer } from '@umd-mith/iiif-timed-transcript';
</script>

<!-- Chapters are auto-parsed from manifest.structures -->
<IIIFPlayer.Root {manifestUrl}>
  <IIIFPlayer.Viewer />
  <IIIFPlayer.Controls>
    <IIIFPlayer.PlayButton />
    <IIIFPlayer.Progress />
    <IIIFPlayer.Time />
  </IIIFPlayer.Controls>
  <IIIFPlayer.Chapters />
</IIIFPlayer.Root>