In deze les bouwen we voort op de vorige lessen en voegen we geavanceerdere functies toe om een volledig werkende cursuspagina te maken. Eerst bekijken we hoe de lespagina er nu bij staat: nog behoorlijk kaal. Ons doel is een videoplayer en een lijst met alle beschikbare video's toe te voegen.

Ik laat eerst zien hoe je de hoofdplayer aan de pagina toevoegt. Omdat we meerdere mave-componenten gaan gebruiken, kopiëren we niet de volledige insluitcode, maar plaatsen we alleen de script-tag bovenaan de pagina. Vervolgens introduceer ik de lijstcomponent, waarmee we alle beschikbare video's kunnen tonen. Voor deze component heb je specifieke markup en JavaScript nodig, en om veiligheidsredenen ook een JWT (JSON Web Token).

Ik neem je mee in het aanmaken van een collectie voor de video's van onze pizzacursus in het mave-dashboard. Je ziet hoe je de collectie-ID opzoekt, met jwt.io een JWT maakt en vanuit het mave-dashboard een API-sleutel genereert. Daarna voegen we de benodigde HTML-markup voor de lijstcomponent toe. Ik laat zien hoe je de weergave van de lijstitems aanpast, waaronder de titel, duur en een eigen pictogram.

Vervolgens voegen we de JWT aan de markup toe, waarna onze lijst met video's op de pagina verschijnt. Voor een betere gebruikerservaring laat ik zien hoe je de volgorde van de video's aanpast en de items klikbaar maakt. Daarvoor voegen we JavaScript toe dat klikgebeurtenissen op de lijstitems afhandelt en de hoofdplayer bijwerkt zodra iemand een video kiest.

In deze les zie je hoe deze functies samen een interactievere en gebruiksvriendelijkere cursuspagina vormen. Aan het einde hebben we een werkende pagina met een hoofdplayer en een klikbare lijst van alle cursusvideo's, zodat gebruikers eenvoudig door de cursusinhoud kunnen navigeren.

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.