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
- Webseiten erstellen
- Content Marketing
- HTML
- YouTube
- Tutorials
Ähnliche Artikel
Mit Twitter-Widget Tweets in die eigene Website einbinden
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…
Erklärvideo erstellen: Die besten Tools im Vergleich
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…
Die besten 10 YouTube-Alternativen im Überblick
YouTube hat das Internet revolutioniert: Seit der Gründung setzte ein regelrechter Siegeszug von Video-Inhalten ein. Inzwischen verzeichnet der Dienst mehr als zwei Milliarden Nutzer, was unter den Videoportalen einem absoluten Spitzenwert entspricht. Doch welche Videoportale existieren sonst noch und was haben sie zu bieten? Die zehn besten Alternativen zu YouTube im Überblick.
Verschiedene Videoformate: Worauf Sie achten sollten
Videoformate unterschiedlichster Art kommen im Netz zum Einsatz. Wir zeigen Ihnen, welche Plattform welches Video-Dateiformat akzeptiert und worin die Vorteile der einzelnen Videoformate bestehen. So können Sie für sich die beste Lösung finden und bei der Nutzung Bandbreite und Speicherplatz sparen. Denn jedes Format bietet unterschiedliche Vor- und Nachteile für Sie und den Endnutzer.
YouTube: Link mit Zeit-Startmarker erstellen – Anleitung
Einen YouTube-Link mit Zeit-Startmarker zu erstellen ist der einfachste Weg, ein Video zu teilen, das erst ab einer bestimmten Stelle abgespielt werden soll. Gerade bei langen Videos stellen Sie so sicher, dass der Empfänger nur die für ihn relevanten Informationen erhält und nicht selbst den richtigen Zeitpunkt einstellen muss. Wie lässt sich ein solcher YouTube-Zeit-Link erstellen?
