Einbetten von Videoportalen

Die wohl einfachste Art, Videos auf der Website einzubinden, ist das Nutzen der bekannten Portale wie YouTube oder Vimeo. Dort erhält man einen Quellcode, den man als HTML-Inhaltselement einfach einfügen kann.

Vorgehen

  1. Laden Sie Ihr Video im jeweiligen Portal hoch (hier: YouTube).
  2. Kopieren Sie den Code zum Einbetten des Videos auf der eigenen Website.
  3. Legen Sie im TYPO3-Backend auf der gewünschten Seite ein neues Inhaltselement an: „Spezielle Elemente" → „HTML".
  4. Fügen Sie unter „HTML-Code" den einzubettenden Code ein und speichern Sie alles ab.

Das Ergebnis sieht dann wie das Video oben aus.

Videos vom eigenen Server bereitstellen

Die zweite Variante, mit TYPO3 Videos darzustellen, ist die direkte Bereitstellung der Videos auf dem eigenen Server. In der einfachsten Form laden Sie das Video hoch (z. B. per FTP, falls die Dateigröße es erfordert) und binden es dann auf der gewünschten Seite als Video-Inhaltselement ein – ein Beispiel dafür sehen Sie in unserem Artikel zu den Tastaturkürzeln in TYPO3.

Unterschiedliche Videoformate & Untertitel

Da die unterschiedlichen Browser (Chrome, Firefox, Edge, Safari etc.) und Endgeräte (Tablets, Smartphones etc.) jeweils nur bestimmte Formate unterstützen, sollten Sie das Video in mindestens drei Formaten bereitstellen: MP4, OGV und WebM. Eine Möglichkeit zur Konvertierung ist z. B. die Website convertio.co.

Des Weiteren sollten für jedes Video Untertitel in Form einer eigenen Textdatei (z. B. im VTT-Format) bereitgestellt werden. Das macht die Website zum einen barriereärmer, zum anderen benutzerfreundlicher (falls Besucherinnen und Besucher keinen Ton abspielen wollen oder können) und nicht zuletzt suchmaschinenfreundlicher: Suchmaschinen können die Inhalte von Videos nicht interpretieren, die Textdatei dagegen sehr wohl.

Sowohl die Bereitstellung von alternativen Videoformaten als auch von Untertiteln übernimmt bei uns direkt das Video-Inhaltselement.

Quellcode des <video>-Tags

Ein solches Video-Element erzeugt HTML mit den Attributen <source> für die vorhandenen Videoformate, <track> für die Untertiteldatei und einer Standard-Fehlermeldung, falls keines der Formate abgespielt werden kann. So sieht der Quellcode aus:

<video id="video" controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogv" type="video/ogg" />
  <source src="video.webm" type="video/webm" />
  <track label="Deutsch" kind="subtitles" srclang="de" src="video.vtt" default />
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

Fazit

Beide Herangehensweisen haben Vor- und Nachteile.

Das Einbetten eines Videos aus einem Portal ist sehr einfach und schont die eigenen Serverkapazitäten – nicht nur hinsichtlich des Speicherplatzes, sondern auch im Hinblick auf die Ladegeschwindigkeit, die ein wichtiges Kriterium beim Ranking in Suchmaschinen ist.

Aber auch das Bereitstellen eines Videos auf dem eigenen Server kann sinnvoll (volle Kontrolle, keine Werbeeinblendungen) oder sogar notwendig sein (rechtliche Aspekte, falls Kunden z. B. keinen Zugriff auf YouTube haben).