Maak kennis met <mave-text>

Ondertiteling naar het volgende niveau

Onlangs schreven we over waar we in 2023 aan werkten. Daarin vertelde ik hoe we de video-ervaring blijven verbeteren. Zo genereren we automatisch ondertitels en kun je de vormgeving ervan zelfs met een eigen thema aanpassen. Toen we klanten e-learningervaringen zagen bouwen, besloten we nog een stap verder te gaan. Met tekst kunnen we veel meer!

Maak kennis met de tekstcomponent

Naast onze meestgebruikte component <mave-player> hebben we <mave-clip>. Die is geoptimaliseerd voor prestaties en past mooi in je UI wanneer je geen player of bediening nodig hebt. Met <mave-list> en <mave-upload> bouw je bovendien eenvoudig je eigen uitgebreide video-ervaring. Vandaag lanceren we <mave-text>: een component waarmee je rechtstreeks op je site een tekstweergave van een video insluit.

Geen lange inleiding: dit praktijkvoorbeeld laat meteen zien wat de nieuwe component oplevert:

Net als bij onze andere componenten kun je de uitstraling van de tekstcomponent aanpassen en hem helemaal eigen maken. Precies wat je van webcomponents verwacht, aangevuld met een paar extra’s van mave.

Zo gebruik je de component

Je kunt de tekstcomponent zelfstandig gebruiken om alleen de tekstversie van een video in te sluiten. Meestal zul je hem echter naast de player-component plaatsen, zoals hier:

<mave-player
  embed="ubg500ZcbxpAbZq"
  theme="dolphin"
  style="display: block; width: 100%; overflow: hidden; background: center / contain no-repeat url(https://space-ubg50.video-dns.com/0ZcbxpAbZq/poster.jpg); aspect-ratio: 16 / 9;"
></mave-player>

<mave-text embed="ubg500ZcbxpAbZq"></mave-text>

Omdat de tekstcomponent dezelfde embed-ID als de player gebruikt, synchroniseren ze automatisch. Je hoeft alleen een bepaalde height in te stellen en de overflow van het element zo te configureren dat het kan scrollen; de rest werkt direct. Pauzeer je de player, dan stopt de tekst ook. Spoel je in de player, dan springt de tekst mee naar de juiste positie.

Je kunt ook op een zin in de tekst klikken om naar dat moment in de video te springen. Met clickable="false" schakel je die functie uit. Daarnaast zijn er nog meer opties die je kunt aanpassen.

We willen de tekstcomponent in de toekomst verder uitbreiden. Laat ons weten wat je ervan vindt — we zijn benieuwd wat je ermee bouwt.