In dieser Lektion stelle ich Ihnen die Textkomponente von mave vor, die es uns ermöglicht, das Transkript eines Videos neben dem Player anzuzeigen. Diese Funktion erweitert die Funktionalität unserer Pizzakursseite durch die Bereitstellung schriftlicher Inhalte, die die Videolektionen begleiten.
Ich erkläre zunächst, dass es bei Mave nicht nur um die Videowiedergabe geht, sondern um alles rund um Videoinhalte. Ich zeige Ihnen, wie Mave automatisch Untertitel für hochgeladene Videos generiert und wie Sie diese Untertitel verwalten können, einschließlich Herunterladen, erneutes Hochladen, Entfernen und Hinzufügen von Untertiteln in verschiedenen Sprachen. Als nächstes stelle ich die Mave-Textkomponente vor.
Ich zeige, wie einfach sie zu implementieren ist – sie verwendet dieselbe Einbettungs-ID wie der Videoplayer, wodurch es einfach ist, das Transkript mit dem richtigen Video zu verbinden. Ich erkläre einige der Standardoptionen der Textkomponente, wie z. B. automatisches Scrollen und Hervorheben.
Ich weise außerdem darauf hin, dass der Text anklickbar wird und in den Player integriert wird, wenn er auf derselben Seite wie ein Mave-Player mit derselben Einbettungs-ID verwendet wird. Wir gehen dann dazu über, dies auf unserer Kursseite umzusetzen. Ich führe Sie durch das Hinzufügen der Textkomponente zu unserem HTML und platziere sie dort, wo das Transkript erscheinen soll.
Ich behebe ein potenzielles Problem: Unser erstes Video enthält kein Transkript. Um dieses Problem zu lösen, zeige ich Ihnen, wie Sie unser JavaScript ändern, um sowohl den Player als auch die Textkomponente zu aktualisieren, wenn ein Benutzer ein anderes Video aus unserer Liste auswählt.
In dieser Lektion betone ich, wie diese Funktionen zusammenarbeiten, um unseren Pizzakursteilnehmern ein umfassenderes und zugänglicheres Lernerlebnis zu bieten. Das Hinzufügen des Transkripts bietet nicht nur eine alternative Möglichkeit, den Inhalt zu konsumieren, sondern verbessert auch die Interaktivität unserer Kursseite.
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>