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:
<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.
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. |
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.
| 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.
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.
Mit dem Homepagebaukasten von 1&1 IONOS können Sie mit nur wenigen Klicks Videos in Ihre Webseite integrieren.
HTML5 ist die neue Kernsprache des Internets. Doch noch immer greifen Webentwickler auf veraltete Auszeichnungssprachen wie HTML 4.01 oder XHTML zurück. Diese erfordern im modernen Webseitenbetrieb oft eine Vielzahl externer Plug-ins, die sowohl die Kompatibilität als auch die Sicherheit einer Webseite gefährden. HTML5 hingegen ermöglicht eine direkte Integration von Multimedia-Elementen und...
Neben E-Mail-Support und Hotline erweisen sich Live-Chats immer häufiger als sinnvolles Support-Angebot. Mithilfe einer Software und einem kleinen Codeschnipsel binden Sie diese Echtzeit-Werkzeuge in Ihr Webprojekt ein und bieten Ihren Kunden damit eine zusätzliche Möglichkeit, mit Ihnen in Kontakt zu treten. Doch zahlen sich diese aufwandsintensiven Chats wirklich aus?
Um Twitter auf Ihrer Website einzubetten, haben Sie nicht nur die Möglichkeit, einen Button zu implementieren, der die Nutzer direkt zum Microblogging-Dienst weiterleitet; Sie können auch mithilfe eines Widgets, das Sie in Ihrem eigenen Twitter-Account erstellen, Beiträge und Favoriten verschiedenster Twitterer direkt auf Ihrer Website oder in Ihrem Blog anzeigen lassen. Die Umsetzung ist nicht...
Ob Sie nun ein Problem erklären, eine langweilige Anleitung auf witzige Weise aufbereiten oder mit Ihrem Produkt Millionen von Menschen erreichen möchten – kreative und humorvolle Erklärvideos bringen Sie garantiert zum Erfolg. Doch was ist überhaupt ein Erklärvideo und auf was sollten Sie beim Erstellen Ihres Videos achten? Wir zeigen Ihnen, mit welchen Tools Sie einzigartige Erklärvideos...