In dieser Lektion führe ich Sie durch den Prozess der Integration Ihres ersten Mave-Videos in eine Webseite. Ich möchte zunächst betonen, wie einfach es ist – es geht lediglich darum, einen Codeausschnitt zu kopieren und in Ihre Website einzufügen. Dann wechsle ich zu Visual Studio Code, wo ich eine HTML-Seite vorbereitet habe, mit der Sie arbeiten können. Diese Seite ist Teil der in unserem GitHub-Repository verfügbaren Ressourcen, auf die ich hinweise, wie ich darauf zugreifen kann. Das Beispiel, das ich verwende, ist eine Webseite für einen Pizza-Backkurs. Ich zeige Ihnen das Grundlayout der Seite und erkläre, dass wir in der Mitte einen Videoplayer als Trailer für den Kurs einfügen wollen. Anschließend füge ich den Mave-Player-Code an der entsprechenden Stelle in der HTML-Datei ein. Anschließend passe ich den Stil schnell an, um sicherzustellen, dass er gut in das Seitenlayout passt.
Um die Anpassungsoptionen von mave vorzustellen, navigiere ich zu unserer Dokumentationsseite. Ich stöbere durch die Player-Optionen und beschließe, unserem Videoplayer ein Thema hinzuzufügen. Ich wähle das Dolphin-Thema als Beispiel und zeige Ihnen, wie Sie dieses Attribut zum Player-Code hinzufügen.
In dieser Lektion möchte ich zeigen, wie einfach es ist, nicht nur einen Mave-Videoplayer in Ihre Webseite einzubetten, sondern ihn auch an das Design Ihrer Website anzupassen. Ich zeige Ihnen, dass Sie mit nur wenigen einfachen Schritten einen voll funktionsfähigen, maßgeschneiderten Videoplayer in Ihre Website integrieren können.
Entwickler
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.
Registrieren Sie sich und starten Sie kostenlos mit unserer 30-tägigen Testphase.
Den Code für diese Lektion finden Sie auf GitHub
1
2
3
4
5
<script type="module">
import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/+esm";
</script>
<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>
<script type="module">
import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/dist/react.js";
</script>
<Player embed="ubg50Cq5Ilpnar1"></Player>
<script type="module">
import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/+esm";
</script>
<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>