The <mave-text> component allows you to embed a textual representation of a video directly onto your site. Using this component users can view a script or transcript of the video content, making it accessible and easily navigable. This is particularly beneficial for accessibility purposes, providing an alternative for those who are deaf or hard of hearing, or for those who prefer reading over watching.
<script
type="module"
src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>
<mave-text embed="{embed id}"></mave-text>Additionally, it aids in SEO optimization by allowing search engines to crawl and index the text content of the videos. The <mave-text> component is easy to integrate and customize, making it a versatile and valuable addition to any website aiming to offer a richer, more accessible user experience.
| Property | Description |
|---|---|
| embed | This points to a specific embed. |
| autoscroll | Defaults to true, which makes sure the current word is on top when a mave-player is provided with the same id. |
| highlight | Sets the highlight background color. The default styling uses a contrast-safe background with an underline. |
| highlight-mode | Defaults to sentence. Use word to highlight only the current word. |
| clickable | Defaults to true. Pointer clicks on transcript words jump to the start of the clicked sentence; Enter and Space jump to the active paragraph. Arrow keys move between transcript controls. |
| transcript-label | Defaults to Transcript, and labels the transcript region for assistive technologies. |
By default, <mave-text> uses highlight-mode="sentence". The active word is highlighted as it is spoken, while previous words in the same sentence stay highlighted until the sentence is complete. If no next sentence starts immediately, the completed sentence remains highlighted briefly before clearing.
Use highlight-mode="word" if you prefer the older behavior where only the current word is highlighted:
<mave-text embed="{embed id}" highlight-mode="word"></mave-text>As the video plays in <mave-player>, the <mave-text> component automatically synchronizes with the audio. In the default sentence mode, the highlight grows word by word through the active sentence, with the highlight background connecting the words in that sentence.
This real-time highlighting guides viewers through the transcript, allowing them to follow along with the audio visually. This feature not only enhances accessibility, making content more digestible for individuals with hearing impairments, but it also benefits learners and viewers who prefer a multisensory approach to content consumption.
