In deze les maak je kennis met de tekstcomponent van mave, waarmee we het transcript van een video naast de player kunnen tonen. Zo voegen we geschreven inhoud toe aan de videolessen en wordt onze pizzacursuspagina nog functioneler.

Ik leg eerst uit dat mave niet alleen om het afspelen van video's draait, maar ook om alles eromheen. Je ziet hoe mave automatisch ondertitels voor geüploade video's genereert en hoe je die beheert: downloaden, opnieuw uploaden, verwijderen en ondertitels in andere talen toevoegen. Daarna introduceer ik de tekstcomponent van mave.

De implementatie is eenvoudig: de component gebruikt dezelfde embed ID als de videoplayer, waardoor je het transcript gemakkelijk aan de juiste video koppelt. Ook bespreek ik enkele standaardopties van de tekstcomponent, zoals automatisch scrollen en markeren.

Wanneer je de tekstcomponent op dezelfde pagina gebruikt als een mave-player met dezelfde embed ID, wordt de tekst klikbaar en werkt hij samen met de player. Vervolgens voegen we de component toe aan onze cursuspagina. Ik laat zien hoe je hem in de HTML plaatst waar het transcript moet verschijnen.

Daarbij lopen we tegen een mogelijk probleem aan: onze eerste video heeft geen transcript. Ik laat zien hoe je de JavaScript aanpast, zodat zowel de player als de tekstcomponent wordt bijgewerkt wanneer iemand een andere video uit de lijst kiest.

Tot slot bekijken we het resultaat: een volledig werkende cursuspagina met een videoplayer, een lijst met cursusvideo's en een gesynchroniseerd transcript. De tekst die op dat moment wordt uitgesproken, licht op en gebruikers kunnen door op het transcript te klikken rechtstreeks naar een bepaald deel van de video springen.

In deze les zie je hoe deze functies samen een completere en toegankelijkere leerervaring voor de deelnemers aan onze pizzacursus creëren. Het transcript biedt niet alleen een andere manier om de inhoud te volgen, maar maakt de cursuspagina ook interactiever.

Mentor

David van Leeuwen is een webontwikkelaar met meer dan 15 jaar ervaring. Tijdens zijn carrière werkte hij samen met multidisciplinaire teams aan projecten voor gerenommeerde bedrijven als Sonos, WeTransfer en Red Bull.

David leidt momenteel de ontwikkeling van Mave en begeleidt je als mentor door deze cursus. Hij deelt graag zijn kennis en helpt je op weg met video-integratie.