In dieser Lektion bauen wir auf dem auf, was wir in den vorherigen Lektionen gemacht haben, und fügen erweiterte Funktionen hinzu, um eine voll funktionsfähige Kursseite zu erstellen. Ich zeige Ihnen zunächst den aktuellen Stand unserer Unterrichtsseite, die noch recht leer ist. Unser Ziel ist es, einen Videoplayer und eine Liste aller verfügbaren Videos hinzuzufügen.

Zuerst zeige ich, wie man der Seite den Hauptvideoplayer hinzufügt. Anstatt den vollständigen Einbettungscode zu kopieren, zeige ich Ihnen, wie Sie oben auf der Seite nur das Skript-Tag hinzufügen, da wir mehrere Mave-Komponenten verwenden. Als nächstes stelle ich die Listenkomponente vor, die es uns ermöglicht, alle verfügbaren Videos anzuzeigen. Ich erkläre, dass für die Verwendung dieser Komponente aus Sicherheitsgründen ein bestimmtes Markup und JavaScript sowie ein JWT (JSON Web Token) erforderlich sind. Ich zeige Ihnen, wie Sie die Sammlungs-ID erhalten und mit jwt.io ein JWT erstellen. Ich zeige auch, wie man einen API-Schlüssel über das Mave-Dashboard generiert. Sobald diese Teile vorhanden sind, führe ich Sie durch das Hinzufügen des erforderlichen HTML-Markups für die Listenkomponente. Ich zeige Ihnen, wie Sie die Anzeige von Listenelementen anpassen, einschließlich Titel, Dauer und eines benutzerdefinierten Symbols. Um das Benutzererlebnis zu verbessern, zeige ich Ihnen, wie Sie die Reihenfolge der Videos in der Liste anpassen und sie anklickbar machen. Dazu gehört das Hinzufügen von JavaScript zur Verarbeitung von Klickereignissen auf Listenelementen und das Aktualisieren des Hauptvideoplayers, wenn ein Video ausgewählt wird. Am Ende der Lektion verfügen wir über eine funktionale Seite mit einem Hauptvideoplayer und einer anklickbaren Liste aller Kursvideos, sodass Benutzer problemlos durch die Kursinhalte navigieren können.

Mentor

David van Leeuwen ist Webentwickler mit mehr als 15 Jahren Erfahrung. Im Laufe seiner Karriere hat er in multidisziplinären Teams an Projekten für renommierte Unternehmen wie Sonos, WeTransfer und Red Bull gearbeitet.

David leitet derzeit die Entwicklung von mave und begleitet Sie als Mentor durch diesen Kurs. Er teilt sein Wissen gern und hilft Ihnen beim Einstieg in die Videointegration.