Wir stellen vor: <mave-text>

Untertitel auf die nächste Ebene bringen

Kürzlich haben wir einen Beitrag darüber veröffentlicht, woran wir 2023 gearbeitet haben. Darin habe ich beschrieben, wie wir das Videoerlebnis verbessert haben. Genauer gesagt: Wir generieren Untertitel automatisch und passen sogar deren Aussehen anhand eines benutzerdefinierten Themes an. Nachdem wir gesehen hatten, wie einige unserer Kunden E-Learning-Angebote erstellten, beschlossen wir, noch einen Schritt weiter zu gehen. Mit Text können wir mehr erreichen!

Einführung in die Textkomponente

Neben unserer am häufigsten verwendeten Komponente <mave-player> haben wir auch <mave-clip>, das sich gut in Ihre Benutzeroberfläche integrieren lässt, wo kein Player und/oder Steuerelemente erforderlich sind und auf Leistung ausgelegt ist. Und wir haben auch <mave-list> und <mave-upload>, mit denen Sie ganz einfach Ihr eigenes umfassendes Videoerlebnis erstellen können. Heute stellen wir <mave-text> vor: eine Komponente zum Einbetten einer Textdarstellung eines Videos direkt in Ihre Website.

Hier ist ohne weiteres das reale Beispiel, was Sie mit dieser neuen Komponente erhalten:

Genau wie bei den anderen Komponenten können Sie das Erscheinungsbild der Textkomponente anpassen und sie so ganz individuell gestalten. Es ist das, was Sie von Webkomponenten erwarten, aber mit einigen Extras bieten wir mit mave.

Wie man es benutzt

Sie könnten die Textkomponente allein verwenden und die Textversion der Einbettung haben. Der häufigste Anwendungsfall wäre jedoch neben der Player-Komponente wie folgt:

<mave-player
  embed="ubg500ZcbxpAbZq"
  theme="dolphin"
  style="display: block; width: 100%; overflow: hidden; background: center / contain no-repeat url(https://space-ubg50.video-dns.com/0ZcbxpAbZq/poster.jpg); aspect-ratio: 16 / 9;"
></mave-player>

<mave-text embed="ubg500ZcbxpAbZq"></mave-text>

Da es dieselbe Einbettungs-ID wie der Player verwendet, wird es automatisch mit dem Player synchronisiert. Sie müssen einen bestimmten height und den overflow des Elements festlegen, damit es scrollt, aber ansonsten holen Sie das Beste aus der Box heraus. Wenn Sie also den Player anhalten, wird auch der Text angehalten. Und wenn Sie im Player suchen, wird der Text auch an der richtigen Position angezeigt.

Sie können außerdem auf einen Satz im Text klicken, um zu dieser Position im Video zu springen. Mit clickable="false" lässt sich diese Funktion deaktivieren. Weitere Optionen finden Sie in der Dokumentation der Text-Komponente.

Unser Plan ist, der Textkomponente weitere Funktionen hinzuzufügen. Teilen Sie uns Ihre Meinung mit und wir sind gespannt, was Sie damit bauen.