HTML: Video einbinden auf der eigenen Website

Seit HTML5 existiert ein natives Element, mit dem sich Videos als vollwertige Webinhalte einbinden lassen. Alternativ haben Sie die Möglichkeit, das Video-Hosting an Anbieter wie YouTube oder Vimeo auszulagern. Wir zeigen Ihnen, wie das funktioniert.

HTML5 – Videos einbinden leicht gemacht

HTML5 macht das Einbinden von Videos kinderleicht. Alles, was Sie dazu benötigen, ist das native Element video, das sich um optionale Attribute erweitern lässt. Wie Sie Videoressourcen dem Quellcode Ihrer Website hinzufügen, zeigt folgendes Codebeispiel:

<video src="beispiel.mp4" width="320" height="240" controls poster="vorschaubild.jpg">
    <p>Dieses Video kann in Ihrem Browser nicht wiedergegeben werden.<br>
    Eine Download-Version steht unter <a href="URL">Link-Adresse</a> zum Abruf bereit.</p>
</video>

Das video-Element im Beispiel enthält die URL zur Videoressource (src="beispiel.mp4") sowie die optionalen Attribute width, height, controls und poster, die definieren, wie das Video auf der Website dargestellt wird. Text, der zwischen dem einleitenden und dem abschließenden Tag des Video-Elements steht, wird nur dann angezeigt, wenn ein Browser das Video nicht darstellen kann. Webseitenbetreibende nutzen diese Funktion in der Regel, um eine alternative Beschreibung sowie einen Download-Link zur Ressource anzubieten.

Optionale Attribute des HTML5-Video-Elements

Wird eine Ressource über das video-Element eingebunden, muss dieses den Link zur Ressource entweder als src-Attribut oder in einem Kindelement source enthalten. Darüber hinaus lässt sich das video-Element um folgende Attribute erweitern:

HTML5-Codec-Support

Die HTML5-Spezifikation definiert das video-Element und die zugehörige Programmierschnittstelle, macht jedoch keine Vorgaben zur Videocodierung. Die Wahl des Videoformats stellt Webseitenbetreibende daher vor Probleme. Jedes der gängigen Videoformate wie WebM, Ogg Theora oder H.264 hat Vor- und Nachteile. Einen gemeinsamen, browserübergreifenden Standard gibt es daher bis dato nicht. Die nachfolgende Tabelle fasst die Video-Codec-Unterstützung der wichtigsten Browser zusammen:

*nur teilweise

Um Inkompatibilitäten vorzubeugen, empfiehlt es sich aus diesem Grund, unterschiedliche Formate bereitzustellen, wenn Sie ein Video in Ihre Website einbinden. Das video-Element erlaubt zu diesem Zweck, verschiedene Videoressourcen durch das Kindelement source einzubinden und mit dem type-Attribut für den Webbrowser auszuzeichnen:

<video width="320" height="240" controls poster="vorschaubild.jpg">
    <source src="beispiel-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="beispiel-vp9.webm" type="video/webm; codecs=vp9">
    <source src="beispiel.mp4" type="video/mp4; codecs=avc1.42E01E">
    Ihr Browser unterstützt das Video-Tag nicht.
</video>

Werden alternative source-Elemente mit entsprechendem type-Attribut ins video-Element eingebunden, wählt ein Browser beim Website-Aufbau automatisch das bevorzugte Videoformat. Dabei ist zu beachten, dass das video-Element bei dieser Art der Videoeinbettung kein src-Attribut mit Ressource enthalten darf.

Video in Homepage einbinden via Video-Plattform

Wer Videos nicht per HTML einbinden, sondern das Video-Hosting an einen externen Provider auslagern möchte, hat bei Plattformen wie YouTube und Vimeo die Möglichkeit, Videomaterial kostenlos hochzuladen und Clips via Einbettungscode in die eigene Website zu integrieren.

Da beliebte Video-Plattformen sicherstellen, dass ihre Inhalte mit allen wichtigen Browsern kompatibel sind, werden die Formate dieser Anbieter auf den meisten Endgeräten unterstützt. Outsourcing von Videoclips hat zudem den Vorteil, dass der eigene Server durch das Streaming nicht zusätzlich belastet wird. Man sollte sich im Vorfeld jedoch über die Nutzungsbedingungen des Video-Hostings informieren und den Einbettungscode den eigenen Ansprüchen entsprechend anpassen.

Möchten Sie beispielsweise ein YouTube-Video einbinden, rufen Sie den entsprechenden Clip über die Plattform auf und entnehmen den Code dem Einbettungsmenü. Hier lassen sich auch zentrale Einstellungen vornehmen, um die Abmessungen des Videos zu definieren sowie Steuerelemente und Videotitel zu aktivieren. Um zu verhindern, dass Fremdinhalte auf der eigenen Seite erscheinen, empfiehlt es sich außerdem, die Vorschaufunktion für alternative Videos zu deaktivieren. Andernfalls präsentiert die Video-Plattform im eingebundenen Player Inhalte anderer User, denen ähnliche Keywords zugeordnet wurden – im schlimmsten Fall die Videos eines direkten Wettbewerbers bzw. einer direkten Wettbewerberin.