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.
Mehr als nur eine Domain!
Hier finden Sie Ihre perfekte Domain - z.B. .de Domain + persönlicher Berater
E-Mail-Postfach
24/7 Support
Wildcard SSL
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">Dies Video kann in Ihrem Browser nicht wiedergegeben werden.<br>Eine Download-Version steht unter <a href="URL">Link-Addresse</a> zum Abruf bereit. </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. Webseitenbetreiber 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:
| Attribut | Funktion |
|---|---|
| width/height | Die Attribute width und height ermöglichen Ihnen, die Abmessungen Ihres Videos explizit anzugeben. Fehlt diese Angabe, greift das video-Element auf die Größeninformation der Videodatei zu. Nutzen Sie lediglich eines der beiden Attribute, passt der darstellende Browser das Seitenverhältnis automatisch an. |
| controls | Mit dem controls-Attribut aktivieren Sie die native Steuerleiste des Webbrowsers. Alternativ lassen sich eigene Steuerelemente per JavaScript definieren. |
| poster | Das poster-Attribut nutzen Sie, um auf eine Grafikdatei zu verweisen, die als Vorschaubild für das Video angezeigt werden soll. Fehlt dieses Attribut, wird der erste Frame des Videos für die Vorschau verwendet. |
| autoplay | Mit dem autoplay-Attribut weisen Sie den Webbrowser an, Videos nach dem Website-Aufbau automatisch zu starten. |
| loop | Verwenden Sie das loop-Attribut, wird das Video in Dauerschleife abgespielt. |
| muted | Mit dem muted-Attribut stellen Sie den Ton des Videos auf stumm. |
| preload | Das preload-Attribut gibt dem Browser eine Empfehlung, wie die Videodatei beim Download der Website vorgeladen werden soll. Dabei stehen Ihnen drei Werte zur Verfügung: beim Standardwert auto wird normalerweise die gesamte Datei geladen, ein video-Element mit dem preload-Wert metadata lädt lediglich Metadaten vor und der Wert none unterbindet das Vorladen von Videodaten. |
Browser ohne HTML5-Support
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.
Das HTML5-Codec-Chaos
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.
| Browser | MP4 (MPEG4-Dateien mit H.264 Video-Codec + AAC Audio-Codec) | WebM (WebM-Dateien mit VP8/VP9 Video-Codec + Vorbis Audio--Codec) | Ogg (Ogg-Dateien mit Theora Video-Codec + Vorbis Audio-Codec) |
|---|---|---|---|
| IE 9+ | ja | nein | nein |
| Firefox | ja | ja | ja |
| Chrome | ja | ja | ja |
| Safari | ja | nein | nein |
| Opera | ja | ja | ja |
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:
<video width=320 height=240 controls poster="vorschaubild.jpg"> <source src="beispiel.webm" type="video/webm"> <source src="beispiel.ogg" type="video/ogg"> <source src="beispiel.mp4" type="video/mp4"> </video>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.
Audiovisuelle Inhalte über Video-Plattformen einbinden
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.
Eine Homepage erstellen mit IONOS
MyWebsite ist die schlüsselfertige Lösung für Ihre professionelle Präsenz im Internet inklusive persönlichem Berater!
SSL-Zertifikat
Domain
E-Mail-Postfach
