Transcript

<Clover.Transcript /><clover-transcript>6 kB added to a page with a Root, gzipped31 kB added to a page with a <clover-root>, styles included, gzipped

The words of the recording or page in view: its captions as text, the cue playing marked, and a field to find words in them, or its transcript as plain text.

<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Transcript follow={} />
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/transcripts/manifest.json">
  <clover-body></clover-body>
  <clover-transcript follow=""></clover-transcript>
</clover-root>

API reference

Inside a Root<clover-root>, it reads the view’s WebVTT captions and any transcript as plain text, with a choice where there are several, and renders nothing where there is neither. It reads the file in the Root’s language where there is one, the Canvas’s captions with it, and where the Root offers the languages to read the resource in (About’s), it offers none of its own: the page has one choice of language. Over the captions, a field finds words as they are typed: the cues with them marked and counted, the first current, and Previous, Next or Enter going through them, each seeking the recording there. A long transcript is drawn a chunk of cues at a time, more as the reader nears its end. Default and Document show it in their Panel. Its other props, and its ref, go to its element.

Prop	Type	Default	Description
`follow`	`boolean`	`true`	Keep the cue playing in view while the media plays.
`find`	`boolean`	`true`	A field over the captions to find words in them, with steps through the cues that have them.
`sticky`	`boolean`	`false`	The find field held in view as the cues scroll under it.
`size`	`"large" \| "small"`	`"large"`	The find field’s size, as Search’s: a tad smaller for a narrow column.
`as`	element type	`"div"`	The element to render, such as a `section`.
`className`	`string`	—	Added to `clover-transcript`.

`<clover-transcript>`

The recording's captions as a transcript, following where it plays, and any plain-text transcript after them. Each cue goes to its time; a field over the captions finds words in them, with steps through the cues that have them.

Name	Type	Default	Description
`follow`	`boolean`	`true`	"false" stops the current cue being kept in view as it plays.
`find`	`boolean`	`true`	"false" leaves out the field that finds words in the captions, and its steps.
`sticky`	`boolean`	—	The find field held in view as the cues scroll under it: at the top of the box that scrolls them, or under a panel accordion's stuck headings.
`size`	`"large" \| "small"`	`large`	The find field's size, as clover-search's: large, or small, a tad smaller, for a narrow column.

Examples

Scroll in a box

Give it a height, and it scrolls in a box of its own. Make the box a named region the keyboard can reach, as here (WCAG 2.1.1).


<Clover.Transcript
  as="section"
  aria-label="Transcript"
  tabIndex={0}
  style={{ maxHeight: "20rem", overflowY: "auto" }}
/>


<!-- The element is a box no reader is told of: the page's own region names and scrolls it. -->
<section
  aria-label="Transcript"
  tabindex="0"
  style="max-height: 20rem; overflow-y: auto"
>
  <clover-transcript></clover-transcript>
</section>

The text of a page

Of an image, it shows what is written on it: here, a newspaper page’s OCR, in German.


<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <Clover.Body />
  <Clover.Transcript />
</Clover.Root>


<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <clover-body></clover-body>
  <clover-transcript></clover-transcript>
</clover-root>

Leave the scrolling to the reader

Use follow={false}follow="false" to leave the scrolling to the reader. The cue playing is still marked.


<Clover.Transcript follow={false} />


<clover-transcript follow="false"></clover-transcript>

A transcript of your own

Clover’s WebVTT parser is exported: parseVtt reads a file’s cues, and cueAt finds the one playing.


import { cueAt, parseVtt } from "@nulib/clover";
 
const cues = parseVtt(await (await fetch(vttUrl)).text());
const index = cueAt(cues, video.currentTime);
const words = index >= 0 ? cues[index].text : "";

Previous versions

Clover 3.x › Viewer

The transcript is a part, Transcript<clover-transcript>, and a Panel section of its own.
informationPanel.vtt.autoScroll: false is follow={false}follow="false".
ignoreCaptionLabels is gone: every WebVTT supplementing body is a caption file.