In deze laatste les voegen we de finishing touch toe aan de website van onze pizzacursus: een eindscherm. Wanneer de huidige video bijna is afgelopen, toont dit scherm de volgende video uit de cursus. Die video kan zelfs automatisch worden afgespeeld.

Eerst leg ik het doel uit: vlak voor het einde van een video willen we informatie over de volgende video tonen en aanbieden om die automatisch af te spelen. Deze mogelijkheid maakt deel uit van het eindscherm van de mave-player. Aan de hand van de mave-documentatie laat ik zien hoe je het eindscherm met een slot in de mave-player implementeert. Ook bespreek ik enkele opties, zoals de resterende tijd tonen, een afbeelding weergeven en de volgende video automatisch starten.

Daarna implementeren we dit in onze code. Ik laat zien waar je de HTML van het eindscherm binnen de player-component plaatst. De HTML die ik heb voorbereid bevat de vormgeving, toont de resterende tijd en een klikbare afbeelding voor de volgende video, en biedt de mogelijkheid om de huidige video opnieuw te starten. Om alles goed te laten werken, voegen we wat aangepaste JavaScript toe. Dit script verwerkt de klik op de afbeelding in het eindscherm en schakelt de player over naar de volgende video.

Tot slot demonstreer ik het resultaat. Wanneer een video bijna is afgelopen, verschijnt het eindscherm met informatie over de volgende video. Zodra de huidige video eindigt, gaat de player automatisch door naar de volgende. Zo ontstaat een vloeiende kijkervaring voor onze cursus.

In deze les zie je hoe het eindscherm de algehele gebruikerservaring van onze cursuswebsite verbetert. Een voorproefje van de volgende video houdt kijkers betrokken en laat ze zonder onderbreking verder kijken. Met deze laatste toevoeging is onze pizzacursuswebsite een volledig werkend en gebruiksvriendelijk online leerplatform.

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.