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 | Defaults to rgba(255, 210, 42, 0.5), but you can change it to any color. |
| clickable | Defaults to true, which makes every paragraph clickable to jump the timeline in mave-player. |
As the video plays in <mave-player>, the <mave-text> component automatically synchronizes with the audio. This means that as each word is spoken in the video, it’s simultaneously highlighted in the text transcript.
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.
