HTML Videos auf Website einbinden - so funktioniert´s

Audiovisuelle Inhalte sorgen für Aufmerksamkeit und erfreuen nicht nur die Besucher Ihrer Website. Auch die Suchmaschinen honorieren den Mehrwert, den multimedialer Content bietet. Insbesondere Videos ermöglichen Ihnen, Informationsangebote abwechslungsreicher zu gestalten. Zudem lassen sich Produkte und Dienstleitungen durch Videos detaillierter darstellen als mit Texten und Bildern allein. Die Bereitstellung von Videoinhalten auf Websites galt allerdings lange Zeit als schwierig.

Denn zur Anzeige von multimedialen Inhalten mussten entsprechende Browser-Plug-ins (z. B. Adobe Flash Player) manuell auf dem Endgerät installiert und regelmäßig aktualisiert werden, was häufig Inkompatibilitäten und Sicherheitslücken zur Folge hatte. Anbieter waren zudem mit komplizierten Einbettungscodes konfrontiert und hatten mitunter Mühe, Videos in die entsprechenden Formate (z.B. SWF) zu konvertieren. Doch diese Zusatztechnologien könnten bald Geschichte sein. Seit der fünften Fassung bietet die Hypertext Markup Language (kurz: HTML) ein natives Element, mit dem sich Videos als vollwertige Webinhalte in den Webseitencode integrieren lassen. Alternativ haben Sie die Möglichkeit, das Videohosting an Anbieter wie YouTube oder Vimeo auszulagern. Wir zeigen Ihnen, wie das funktioniert.

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:

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. Webseitenbetreiber nutzen diese Funktion in der Regel, um eine alternative Beschreibung sowie einen Download-Link zur Ressource anzubieten.

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:

Aktuelle Versionen der geläufigsten Webbrowser unterstützen HTML5. Um Videoinhalte auf Ihrer Website auch für jene Nutzer zugänglich zu machen, die technisch nicht up to date sind, ermöglichen Textlinks innerhalb des video-Elements, separate Download-Dateien zum Video anzubieten. Wer statt des Videos den Alternativtext ausgespielt bekommt, hat so die Wahl, das Video herunterzuladen und in einem lokalen Mediaplayer anzuschauen.  

Die HTML5-Spezifikation definiert das video-Element und die zugehörige Programmierschnittstelle (application programming interface, API), macht jedoch keine Vorgaben zur Videocodierung. Die Wahl des Videoformats stellt Webseitenbetreiber daher vor Probleme. Jedes der gängigen Videoformate WebM, OggTheora und H.264/MPEG4hat Vor- und Nachteile. Und so konnten sich die Hersteller marktführender Webbrowser bis heute auf keinen gemeinsamen Standard einigen. Während der Internet Explorer und Safari in erster Linie auf das für die Hersteller gebührenpflichtige Format H.264/MPEG4 setzen, ein Format das seit 2013 nahezu überall verfügbar ist, unterstützen die Webbrowser Firefox, Chrome und Opera auch freie Formate wie Ogg Theora und WebM.

Um Inkompatibilitäten vorzubeugen, empfiehlt es sich, Videos in unterschiedlichen Formaten bereitzustellen. Das video-Element erlaubt zu diesem Zweck, verschiedene Videoressourcen durch das Kindelement source einzubinden und mit dem typ-Attribut für den Webbrowser auszuzeichnen:

Werden alternative source-Elemente mit entsprechendem typ-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.

Wer Videos nicht über den eigenen Server bereitstellen, sondern das Video-Hosting an einen externen Dienstleister auszulagern 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 geläufigsten Webbrowsern 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. Webseitenbetreiber sollten 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 Nutzer, denen ähnliche Keywords zugeordnet wurden – im schlimmsten Fall die Videos eines direkten Wettbewerbers.