In dieser Lektion zeige ich Ihnen, wie Sie den Videoplayer, den wir in der vorherigen Lektion hinzugefügt haben, optimieren, um die Homepage unseres Pizzakurses einladender zu gestalten. Ich erkläre, dass wir möchten, dass das Video automatisch abgespielt wird und dass die Zuschauer klicken können, um das Video in voller Länge anzusehen. Ich beginne damit, die Verwendung der Clip-Komponente zu demonstrieren, die im Wesentlichen mit der des Players identisch ist, jedoch auf 60 Sekunden begrenzt ist. Dadurch ist eine automatische Wiedergabe möglich, ohne dass die Seite überlastet wird. Ich weise darauf hin, dass diese einfache Änderung zu einem automatisch abspielenden, schnell ladenden Video führt, das auf 60 Sekunden begrenzt ist. Damit Zuschauer das vollständige Video ansehen können, stelle ich die Pop-Funktion x-mave-pop vor. Ich zeige Ihnen, wie Sie dem Clip ein Play-Button-Overlay hinzufügen und das x-mave-pop-Pop-Attribut implementieren.

Dadurch kann das vollständige Video beim Klicken in einem Popup-Fenster geöffnet werden. Dann gehe ich auf ein mögliches Problem ein: Das zuvor festgelegte Thema lässt sich nicht auf den Popup-Player übertragen. Um dies zu beheben, zeige ich, wie man ein benutzerdefiniertes x-mave-pop definiert. Ich führe Sie durch die Dokumentation und zeige Ihnen, wie Sie dieses benutzerdefinierte Popup implementieren, das es uns ermöglicht, unser ausgewähltes Thema (in diesem Fall Dolphin) im Vollbild-Player beizubehalten. Ich zeige auch die Flexibilität von mave bei der Anpassung, die es Ihnen ermöglicht, ein einheitliches Erscheinungsbild über verschiedene Videoanzeigeformate hinweg beizubehalten.

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.