Met de <mave-text>-component kun je een tekstuele weergave van een video rechtstreeks op je site embedden. Gebruikers kunnen hiermee een script of transcript van de videocontent bekijken, zodat de content toegankelijk en eenvoudig te doorzoeken is. Dit is vooral waardevol voor de toegankelijkheid: het biedt een alternatief voor mensen die doof of slechthorend zijn en voor mensen die liever lezen dan kijken.
<script
type="module"
src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>
<mave-text embed="{embed id}"></mave-text>Daarnaast helpt de component bij SEO-optimalisatie, omdat zoekmachines de tekstinhoud van de video’s kunnen crawlen en indexeren. De <mave-text>-component is eenvoudig te integreren en aan te passen. Daarmee is het een veelzijdige en waardevolle toevoeging aan elke website die een rijkere, toegankelijkere gebruikerservaring wil bieden.
| Eigenschap | Beschrijving |
|---|---|
| embed | Verwijst naar een specifieke embed. |
| autoscroll | Standaard true. Zorgt dat het huidige woord bovenaan staat wanneer er een mave-player met hetzelfde ID aanwezig is. |
| highlight | Stelt de achtergrondkleur van de markering in. De standaardopmaak gebruikt een contrastrijke achtergrond met onderstreping. |
| highlight-mode | Standaard sentence. Gebruik word om alleen het huidige woord te markeren. |
| clickable | Standaard true. Als je met de aanwijzer op een woord in het transcript klikt, springt de video naar het begin van de aangeklikte zin. Met Enter en Spatie spring je naar de actieve alinea. Met de pijltoetsen navigeer je tussen de transcriptbedieningselementen. |
| transcript-label | Standaard Transcript. Geeft het transcriptgebied een label voor ondersteunende technologieën. |
Standaard gebruikt <mave-text> highlight-mode="sentence". Het actieve woord wordt gemarkeerd terwijl het wordt uitgesproken. Eerdere woorden in dezelfde zin blijven gemarkeerd totdat de zin is voltooid. Als de volgende zin niet meteen begint, blijft de voltooide zin nog kort gemarkeerd voordat de markering verdwijnt.
Gebruik highlight-mode="word" als je de eerdere werking verkiest, waarbij alleen het huidige woord wordt gemarkeerd:
<mave-text embed="{embed id}" highlight-mode="word"></mave-text>Terwijl de video in <mave-player> wordt afgespeeld, synchroniseert de <mave-text>-component automatisch met de audio. In de standaard zinsmodus groeit de markering woord voor woord door de actieve zin. De achtergrond van de markering verbindt daarbij de woorden in die zin.
Deze realtime markering leidt kijkers door het transcript, zodat ze de audio visueel kunnen volgen. De functie verbetert niet alleen de toegankelijkheid en maakt content beter te verwerken voor mensen met een gehoorbeperking, maar is ook nuttig voor mensen die leren of content liever op meerdere manieren tegelijk tot zich nemen.
