Wie Sie in Websites Videos einbinden – mit HTML5, YouTube & Co

Immer mehr Websites setzen auf bewegte Bilder, um Informationen anschaulich zu vermitteln oder Marken und Produkte unterhaltsam zu bewerben. Multimediale Inhalte sorgen für eine positive Nutzererfahrung und können darüber hinaus einen wichtigen Beitrag zur Barrierefreiheit von Websites leisten.

Ob Produktpräsentationen, Imagevideos, Tutorials oder ein Film über das soziale Engagement eines Unternehmens ­ – eines haben gut gemachte Videos gemein: Sie halten Besucher länger auf der Seite, erhöhen den Traffic und werden gerne in den sozialen Medien geliked. Indem sie so auf relevante Kennzahlen der Suchmaschinenoptimierung einzahlen, sind sie auch eine gute Möglichkeit, mit vergleichsweise kleinem Budget das Ranking einer Seite zu verbessern.

In diesem Beitrag erfahren Sie, welche Möglichkeiten es zur Integration von Videos in Websites gibt und welche Vor- und Nachteile damit verbunden sind.

Video in die Website einbinden: Welche Möglichkeiten gibt es?

Die Zeiten, in denen man auf Adobe Flash und entsprechende Browser-Plugins angewiesen war, die manuell auf dem Endgerät installiert und regelmäßig aktualisiert werden mussten, sind glücklicherweise vorbei. Und damit auch das Problem von Inkompatibilitäten, Sicherheitslücken und komplizierten Einbettungscodes.

HTML5 bietet mit dem <video>-Element eine Möglichkeit, ein Video ohne Player und Plugin in die Website einzubinden. Nutzer der beiden verbreitetsten CMS-Systeme WordPress und Joomla! können sich das Leben noch leichter machen, indem sie auf Video-Plugins zur Integration von Clips zurückgreifen.

Wer die Videos nicht direkt auf den eigenen Server laden möchte, kann fremdhosten lassen. Die Videos werden dann zunächst auf eine Videoplattform wie Vimeo oder YouTube hochgeladen und anschließend per iFrame in die Webseite eingebunden.

Wenn es darum geht, ein Video in eine Website einzubinden, stellt sich also zunächst die Frage, ob das Video auf dem eigenen Webspace oder auf einem fremden Server gehostet werden soll. Die Entscheidung richtet sich dabei nach den Anforderungen, denn beide Varianten haben unterschiedliche Stärken und Schwächen.

Die Vorteile von Videoplattformen

Der größte Trumpf von Videoplattformen ist wohl ihre Einfachheit. Um ein Video auf YouTube oder Vimeo hochzuladen, brauchen Sie nur ein Nutzerkonto und das Video selbst. Spezielle HTML-Kenntnisse oder Kenntnisse zu Videoformaten, Codecs oder Bildformaten sind nicht nötig. Nach einem erfolgreichen Upload muss lediglich ein Einbettungs-Code im Quelltext der eigenen Seite hinterlegt werden, damit der Clip auch dort zu sehen ist.

Videos können zudem im Nachhinein ganz einfach um Zusatzinformationen wie Untertitel oder Links ergänzt werden. Vimeo bietet sogar die Möglichkeit, gehostete Videos unter Beibehaltung des ursprünglichen Links bzw. Einbettungscodes zu ändern oder zu aktualisieren.

Ein weiterer Vorteil von YouTube und Co liegt im Speicherplatz und den Ladezeiten. Ein fremd-gehostetes Bewegtbild blockiert keinen Platz auf Ihrem Server und bremst auch nicht die Ladezeiten Ihrer Website aus, was bei größeren selbstgehosteten Videodateien durchaus der Fall sein kann.

Auch die Reichweite spricht für ein Hosting auf den großen Videoplattformen, da die Videos nicht nur für die Besucher Ihrer Seite zu sehen sind, sondern auch für die Millionen Nutzer von YouTube und Vimeo. Ein gutes Video kann so schneller eine größere Zahl von Nutzern erreichen, in sozialen Netzwerken geteilt werden und z. B. Unternehmen und Produkten schneller zu größerer Bekanntheit verhelfen.

Nachteile von Fremdhosting

Den Vorteilen stehen allerdings einige Nachteile gegenüber: Zum einen müssen für das erforderliche Kundenkonto bei Fremdhostern sensible persönliche Daten angegeben werden. Zum anderen haben Sie keine volle Kontrolle über fremdgehostete Videos.

Es besteht immer ein Risiko, dass ein Video plötzlich von einer Plattform verschwindet – und somit auch nicht mehr auf Ihrer Webseite zu sehen ist. Die Plattform-Anbieter prüfen regelmäßig, ob die Inhalte der Clips ihren AGBs entsprechen. YouTube löscht Videos, die es für gefährlich, gewalttätig oder pornografisch hält. Werbliche Inhalte werden dagegen nicht grundsätzlich ausgeschlossen. Auch bei Vimeo können Werbeclips gehostet werden, allerdings ist dafür eine kostenpflichtige Mitgliedschaft erforderlich.

Bei YouTube wird der Service darüber hinaus damit erkauft, dass die eigenen Clips mit fremden Werbeeinblendungen kombiniert werden. Diese in letzter Zeit immer häufigeren Einblendungen können nicht nur lästig sein und Performance-Vorteile beim Fremdhosting zunichtemachen, sondern auch sehr kontraproduktiv sein, wenn z. B. Ihr Imagevideo durch die Werbeeinspielung eines Mitbewerbers eingeleitet oder unterbrochen wird.

Hosting auf dem eigenen Webserver: Die Vorteile

Self-Hosting punktet vor allem mit der vollen Kontrolle über das, was auf Ihrer Webseite zu sehen ist. Zum einen können Sie Ihre Videos veröffentlichen, ohne auf Nutzungsbedingungen einer Videoplattform Rücksicht nehmen oder damit rechnen zu müssen, dass das Video plötzlich nicht mehr zu sehen ist.

Sie haben auch mehr Einfluss auf den Verbreitungsweg und die Adressaten des eigenen Videos, da es nur auf Ihrer eigenen Website abrufbar ist und nicht nahezu unbegrenzt im Internet verbreitet werden kann. Die Videos vom eigenen Webspace bleiben zudem frei von unerwünschten Werbeeinblendungen. Die Besucher Ihrer Seite sehen nur das Video, was sie auch angeklickt haben und springen nicht ab, weil sie von ungewünschten Inhalten genervt sind.

Darüber hinaus gibt es mehr Möglichkeiten das Video auf der Website einzusetzen, so können die Clips z. B. in eine Slideshow integriert oder als Hintergrundvideo abgespielt werden.

Nachteile bei Self-Hosting

Die vielleicht größten Nachteile von Videos, die auf dem eigenen Webserver gehostet sind, liegen im Speicherplatzverbrauch und darin, dass größere Clips die Ladezeiten der Webseiten ausbremsen können – insbesondere dann, wenn die Clips automatisch abgespielt werden. Auch kann es zu Performance-Einbußen kommen, sobald eine größere Zahl an Webseitenbesuchern auf dasselbe Video zugreift.

Self-Hosting ist darüber hinaus etwas aufwendiger und erfordert ein wenig mehr technische Kenntnisse – auch zu Videoformaten – als der Weg über die Videoplattformen. Allerdings ist mit den Möglichkeiten von HTML5, oder den Video-Plugins für WordPress und Joomla! der Aufwand deutlich geringer als noch vor einigen Jahren.

Videos in Websites einbinden mit HTML5

Mit dem <video>-Element in HTML5 gelingt das Einbetten von Videos auch ohne tiefgreifende HTML-Kenntnisse und ohne Browser-Kompatibilitätsprobleme. <video> lässt sich dabei durch zusätzliche Attribute erweitern, die definieren, wie das Video auf der Website dargestellt wird. So fügen Sie ein Video in den Quellcode Ihrer Website ein:

<video src="beispielordner/beispielvideo.mp4" width="640" height="480" controls poster="vorschaubild.jpg" type ="video/mp4">Ihr Browser kann dieses Video leider nicht wiedergeben.</video>

Die Attribute height und width geben das Format des Videoplayers in Pixeln an. controls initiiert die Anzeige von Steuerelementen wie Start/Stopp, Pause und der Lautstärkeregelung. poster verweist auf den Speicherort einer Bilddatei, die als Vorschaubild angezeigt wird. Mit weiteren Attributen wie autoplay oder loop können das automatische Abspielen des Clips oder die Wiedergabe in Endlosschleife gesteuert werden. Das optionale Attribut type gibt das Format des Videos an – mehr zu geeigneten Videoformaten im nächsten Abschnitt.

Jüngere Versionen der verbreitetsten Webbrowser unterstützen HTML5. Für den Fall, dass ein Seitenbesucher doch einmal einen Browser nutzt, der das Video nicht anzeigt, können dem Video-Element weitere Inhalte hinzugefügt werden, die statt des Clips angezeigt werden, z. B: Ihr Browser kann dieses Video leider nicht wiedergeben.

Welche Video-Formate eignen sich für Webseiten?

Leider haben nicht alle Browser die gleichen Vorlieben hinsichtlich der Videoformate. Für Firefox, Chrome und Opera sind traditionell Videos im OGV/OGG-Format die beste Wahl, inzwischen werden aber auch MP4-Videos wiedergegeben. Safari spielt MP4, M4V und MOV problemlos ab. Auch der Internet Explorer gibt ab Version 9 MP4-Videos ohne Plugin wieder. Ältere Versionen des Microsoft-Browsers erfordern allerdings ein Plugin, um MP4-Videos anzuzeigen. Für Smartphones und Tablets mit Android oder iOS ist MP4 das geeignetste Format.

Das universellste Videoformat ist zurzeit also MP4. Mit einem zusätzlichen Video im OGV/OGG-Format für Firefox, Chrome und Opera gehen Sie zudem sicher, dass auch diese Browser Ihr Video ohne Probleme abspielen. Das HTML5-Video-Element erlaubt dazu mehrere <source>-Tags, sodass Sie problemlos Videos in mehreren Formaten angeben können, aus denen sich der Browser das passende aussuchen kann:

<video width="640" height="480" controls poster="vorschaubild.jpg">
<source src="beispielordner/beispielvideo.mp4" type ="video/mp4">
<source src="beispielordner/beispielvideo.ogg" type ="video/ogg">
Ihr Browser kann dieses Video leider nicht wiedergeben.
</video>

WordPress und Joomla! – Videos einbinden per Plugin

Nutzer der beiden verbreitetsten CMS-Systeme WordPress und Joomla! können darüber hinaus Videos ganz einfach per Video-Plugin in die Website einbauen. WordPress-Plugins wie der Easy Video Player ermöglichen sowohl die Einbindung von selbst- als auch von fremdgehosteten Videos. Soll das Video als Hintergrund abgespielt werden, kann dies über das Plugin Video Background realisiert werden. Joomla!-Nutzer können z. B. mit der Extension AllVideos fremd- und selbstgehostete Videos in Ihre Website einbinden. Noch leichter und direkter ist die Videoeinbindung über die WordPress-Mediathek. Dabei muss man allerdings auf Zusatzfunktionen und besondere Wiedergabemöglichkeiten verzichten. Das Thema „Videos und WordPress“ werden wir in einem eigenen Beitrag ausführlicher beleuchten.

Titelmotiv: Photo by Jakob Owens on Unsplash

End of article

Wolf-Dieter

Über den Autor

Wolf-Dieter

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing und SEO und verantwortlicher Redakteur des DomainFactory Blogs. Er interessiert sich leidenschaftlich für neue Themen aus der IT- Welt und engagiert sich für Open-Source-Communities. Sein Motto: Immer offen für neue Ideen.

0 Kommentare

Bitte füllen Sie das Captcha aus : *

Reload Image

Die von Ihnen hier erhobenen Daten werden von der domainfactory GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.df.eu/datenschutz