Warum sich das Erstellen von gut lesbaren Untertiteln bei Videos lohnt

von: Sebastian Schreier | 09.02.2025

Videos sind ein wertvolles Marketinginstrument und bieten die Möglichkeit, nicht nur Informationen zu vermitteln, sondern auch Emotionen zu wecken, Geschichten zu erzählen und komplexe Produkte oder Dienstleistungen auf verständliche Weise zu erklären. Darüber hinaus können sie aber auch der Unterhaltung dienen.

Welche Videoformate gibt es?

Speziell im Bereich des E-Commerce lohnt es sich, Videos für die verschiedensten Zwecke einzusetzen. Beliebte Beispiele sind Produktvideos, Erklärvideos beziehungsweise How-To-Videos oder auch Imagefilme.

Produktvideos erklären in einer sachlichen Art und Weise, was ein Produkt kann und für welche Anwendungsbereiche es gedacht ist, welche Vorteile es hat und welchen Nutzen oder Mehrwert es dem Kunden bringt.

In Erklärvideos zeigen Unternehmen, Tester oder auch Konsumenten, wie man ein Produkt nutzt und richtig einsetzt oder wie etwas abläuft, beispielsweise ein komplexer Prozess oder Sachverhalt.

Bei Imagefilmen geht es darum, die Marke, das Unternehmen oder eine Person zu präsentieren und hervorzuheben, was diese ausmacht. Wichtig ist, dass damit eine bestimmte Botschaft vermittelt wird, zum Beispiel durch das Nennen von Alleinstellungsmerkmalen oder einer speziellen Unternehmensphilosophie.

Was sind die Vorteile von Videos und worauf ist bei deren Einsatz zu achten?

Der größte Vorteil von Videos besteht darin, das komplexe Inhalte, Produkte oder Dienstleistungen auf verständliche Weise erklärt werden können. Wenn die potenziellen Kunden die Produkte oder Dienstleistungen besser verstehen, erleichtert dies dann auch die Kaufentscheidung.

Generell bieten sie durch die Bewegtheit und Dynamik mehr Aufmerksamkeit als es bei reinen Texten der Fall ist. Kurze, aussagekräftige Videos vermitteln die notwendige Botschaft nachhaltiger und langweilen den Betrachter nicht unnötig. Sie erhöhen zudem auch die Verweildauer der Besucher auf der Webseite.

Außerdem zeigen Suchmaschinen themenrelevante Videos, die direkt auf der Webseite eingebunden sind, prominent in den Suchergebnissen an, weshalb beispielsweise gute Erklärvideos das Suchmaschinen-Ranking positiv beeinflussen können. Deshalb sollte man vor allem auch präzise, relevante und suchmaschinenfreundliche Titel verwenden, ausführliche und informative Beschreibungen hinterlegen und ansprechende Vorschaubilder für die Videos auswählen.

Für den Erfolg eines Videos sollten vorab klare Ziele definiert, die passende Zielgruppe identifiziert, eine klare Botschaft festgelegt und das richtige Videoformat ausgewählt werden. Ziele könnten beispielsweise der Ausbau der Markenbekanntheit, die Verbesserung des Suchmaschinen-Rankings oder die Stärkung der Kundenbindung sein. Außerdem sollten neben der eigenen Webseite weitere Kanäle wie Social Media oder Karrierenetzwerke zur Verbreitung des Videos genutzt werden.

Im Sinne der Barrierefreiheit und des Zwei-Sinne-Prinzips sollte alles, was man kommunizieren will, für zwei Sinne zur Verfügung stehen. Aus diesem Grund sollten Videos mit Ton auch über gut lesbare Untertitel verfügen, sodass schwerhörige oder gehörlose Menschen den gesprochenen Inhalt nachvollziehen können. Es gibt dabei zwei Arten von Untertiteln: "offene" (im Englischen "Open Captions") und "geschlossene" (im Englischen "Closed Captions"). Offene Untertitel sind immer sichtbar, denn sie werden bereits bei der Produktion ins Bild integriert und müssen vom Nutzer nicht extra zugeschalten werden. Geschlossene Untertitel können vom Nutzer dagegen unabhängig vom Video eingeblendet und so mit einem geeigneten Player auch in ihrer Gestaltung (beispielsweise der Kontrast oder die Schriftgröße) nach den eigenen Wünschen angepasst werden. Sie bestehen aus einer mit einem Zeitstempel versehenen Textdatei im vtt-, srt-, stl- oder xml-Format.

Für blinde Menschen empfiehlt es sich, auch eine sogenannte Auto-Deskription oder ein Transkript anzubieten, sodass die gesprochenen Wörter auch als Text vorhanden sind. Der Sprecher gibt bei diesen zusätzliche Informationen wie Hinweise zum Standort, Hintergrund, Personen oder Geräuschen, die in dem Video zu sehen oder zu hören und inhaltlich und für das Gesamtverständnis relevant sind.

Eigenhosting oder Videoplattform - was lohnt sich mehr?

Um die Ladezeit der Webseite nicht unnötig zu erhöhen, empfiehlt es sich in den meisten Fällen, Videos auf externen Servern wie bei YouTube oder Vimeo hoch zu laden und über deren Video-Player einzubinden.

Möchte man jedoch unabhängig von externen Plattformen bleiben, kann man Videos auch auf dem eigenen Server lagern und entsprechend einbinden. Zur Einbindung wird häufig das HTML5-Videoelement genutzt, das von allen wichtigen Browsern unterstützt wird. Dieses weist den Browser an, eine Videodatei aus einer anderen Quelle zu laden, indem es den Speicherort der Videodatei angibt. Folgende Attribute können beim HTML5-Videoelement eingefügt werden:

controls: über dieses Attribut bietet der Browser Steuerungen an, mit denen der Benutzer die Videowiedergabe (beispielsweise Lautstärke und Pause/Wiedergabe) steuern kann
height: die Höhe des Anzeigebereichs des Videos in Pixeln
poster: eine URL für das Bild, das angezeigt wird, während das Video heruntergeladen wird
preload: über dieses Attribut kann man festlegen, ob das Video komplett (auto) oder nur die Video-Metadaten (metadata) vorgeladen werden oder ob dies gar nicht der Fall sein soll (none)
src: die URL des einzubindenden Videos - es wird jedoch empfohlen, stattdessen lieber das source-Element innerhalb des Videoelements zu verwenden
width: die Breite des Anzeigebereichs des Videos in Pixeln.

Für die Barrierefreiheit eines Videos sollte innerhalb des Videoelements das track-Element eingesetzt werden. Bei dessen Attribut kind kann man folgende Werte nutzen:

subtitles: übersetzte Texte für Dialoge oder sprachliche Inhalte in Form von Untertiteln, die auch zusätzliche Hintergrundinformationen enthalten können
captions: die geschlossenen Untertitel ("Closed Captions") bieten eine Transkription und möglicherweise eine Übersetzung des gesprochenen Wortes
chapters: Kapitelüberschriften helfen dem Benutzer bei der Navigation innerhalb des Videos
metadata: enthält Tracks mit maschinenlesbaren Informationen, die für den Benutzer nicht sichtbar sind.

Im Attribut label kann der Titel des Text-Tracks festgelegt werden, der vom Browser beim Auflisten verfügbarer Text-Tracks verwendet wird. Das Attribut src beinhaltet dagegen die URL zum Track. Über das srclang-Attribut wird die Sprache (beispielsweise "de" für Deutsch) der Track-Textdatei festgelegt.

Wie lassen sich Videos in Shopware 6 integrieren?

In Shopware 6 kann man ein YouTube-Video über den CMS-Block "YouTube-Video" und ein Vimeo-Video über den CMS-Block "Vimeo-Video" aus der Block-Kategorie "Video" umsetzen. Bei beiden CMS-Elementen kann über den Schalter "Erweiterter Datenschutzmodus" festgelegt werden, dass die Video-Plattformen solange keine Informationen über die Besucher der Webseite speichern, bis sie sich das Video ansehen. Im Sinne der Barrierefreiheit sollte der Schalter "Video-Steuerung anzeigen" aktiviert bleiben, den Schalter "Automatisch abspielen" sollte man hingegen deaktiviert lassen. Um die Ladezeit der Webseite nicht unnötig negativ zu beeinflussen, empfiehlt es sich, auch den Schalter "Video erst nach Bestätigung durch den User laden" zu aktivieren.

Ein HTML5-Videoelement kann über den CMS-Block "HTML" aus der Block-Kategorie "HTML" integriert werden. Der Inhalt könnte beispielsweise folgendermaßen aufgebaut sein:

<div class="video-container"> <video controls poster="https://www.sebastianschreier.de/media/23/04/72/1620147722/poster.gif"> <source src="https://www.sebastianschreier.de/media/54/21/12/1760147788/mp4-video.mp4" type="video/mp4" /> <source src="https://www.sebastianschreier.de/media/38/65/65/1810148543/ogv-video.ogv" type="video/ogv" /> <track kind="captions" label="Beschriftungen" srclang="de" src="https://www.sebastianschreier.de/media/54/57/98/1850141523/captions.de_.vtt" /> Das <a href="https://www.sebastianschreier.de/media/54/21/12/1760147788/mp4-video.mp4">Video</a> mit <a href="https://www.sebastianschreier.de/media/54/57/98/1850141523/captions.de_.vtt">Untertiteln</a> herunterladen. </video> <div>

Damit sich die Breite und Höhe des Videos automatisch an den verfügbaren Platz im Browserfenster anpasst, sollte zusätzlich noch folgender CSS-Code mit abgelegt werden:

<style type="text/css"> .video-container { max-width: 100%; margin: 0 auto; } .video-container video { width: 100%; height: auto; } </style>