HTML: Video einbinden auf der eigenen Website

Seit HTML5 existiert ein natives Element, mit dem sich Videos als voll­wer­ti­ge Web­in­hal­te einbinden lassen. Al­ter­na­tiv haben Sie die Mög­lich­keit, das Video-Hosting an Anbieter wie YouTube oder Vimeo aus­zu­la­gern. Wir zeigen Ihnen, wie das funk­tio­niert.

HTML5 – Videos einbinden leicht gemacht

HTML5 macht das Einbinden von Videos kin­der­leicht. Alles, was Sie dazu benötigen, ist das native Element video, das sich um optionale Attribute erweitern lässt. Wie Sie Vi­deo­res­sour­cen dem Quellcode Ihrer Website hin­zu­fü­gen, zeigt folgendes Code­bei­spiel:

<video src="beispiel.mp4" width="320" height="240" controls poster="vorschaubild.jpg">
    <p>Dieses Video kann in Ihrem Browser nicht wiedergegeben werden.<br>
    Eine Download-Version steht unter <a href="URL">Link-Adresse</a> zum Abruf bereit.</p>
</video>

Das video-Element im Beispiel enthält die URL zur Vi­deo­res­sour­ce (src="beispiel.mp4") sowie die op­tio­na­len Attribute width, height, controls und poster, die de­fi­nie­ren, wie das Video auf der Website dar­ge­stellt wird. Text, der zwischen dem ein­lei­ten­den und dem ab­schlie­ßen­den Tag des Video-Elements steht, wird nur dann angezeigt, wenn ein Browser das Video nicht dar­stel­len kann. Web­sei­ten­be­trei­ben­de nutzen diese Funktion in der Regel, um eine al­ter­na­ti­ve Be­schrei­bung sowie einen Download-Link zur Ressource an­zu­bie­ten.

Optionale Attribute des HTML5-Video-Elements

Wird eine Ressource über das video-Element ein­ge­bun­den, muss dieses den Link zur Ressource entweder als src-Attribut oder in einem Kind­ele­ment source enthalten. Darüber hinaus lässt sich das video-Element um folgende Attribute erweitern:

HTML5-Codec-Support

Die HTML5-Spe­zi­fi­ka­ti­on definiert das video-Element und die zu­ge­hö­ri­ge Pro­gram­mier­schnitt­stel­le, macht jedoch keine Vorgaben zur Vi­deo­co­die­rung. Die Wahl des Vi­deo­for­mats stellt Web­sei­ten­be­trei­ben­de daher vor Probleme. Jedes der gängigen Vi­deo­for­ma­te wie WebM, Ogg Theora oder H.264 hat Vor- und Nachteile. Einen ge­mein­sa­men, brow­se­r­ü­ber­grei­fen­den Standard gibt es daher bis dato nicht. Die nach­fol­gen­de Tabelle fasst die Video-Codec-Un­ter­stüt­zung der wich­tigs­ten Browser zusammen:

*nur teilweise

Um In­kom­pa­ti­bi­li­tä­ten vor­zu­beu­gen, empfiehlt es sich aus diesem Grund, un­ter­schied­li­che Formate be­reit­zu­stel­len, wenn Sie ein Video in Ihre Website einbinden. Das video-Element erlaubt zu diesem Zweck, ver­schie­de­ne Vi­deo­res­sour­cen durch das Kind­ele­ment source ein­zu­bin­den und mit dem type-Attribut für den Web­brow­ser aus­zu­zeich­nen:

<video width="320" height="240" controls poster="vorschaubild.jpg">
    <source src="beispiel-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="beispiel-vp9.webm" type="video/webm; codecs=vp9">
    <source src="beispiel.mp4" type="video/mp4; codecs=avc1.42E01E">
    Ihr Browser unterstützt das Video-Tag nicht.
</video>

Werden al­ter­na­ti­ve source-Elemente mit ent­spre­chen­dem type-Attribut ins video-Element ein­ge­bun­den, wählt ein Browser beim Website-Aufbau au­to­ma­tisch das be­vor­zug­te Vi­deo­for­mat. Dabei ist zu beachten, dass das video-Element bei dieser Art der Vi­deo­ein­bet­tung kein src-Attribut mit Ressource enthalten darf.

Video in Homepage einbinden via Video-Plattform

Wer Videos nicht per HTML einbinden, sondern das Video-Hosting an einen externen Provider auslagern möchte, hat bei Platt­for­men wie YouTube und Vimeo die Mög­lich­keit, Vi­deo­ma­te­ri­al kostenlos hoch­zu­la­den und Clips via Ein­bet­tungs­code in die eigene Website zu in­te­grie­ren.

Da beliebte Video-Platt­for­men si­cher­stel­len, dass ihre Inhalte mit allen wichtigen Browsern kom­pa­ti­bel sind, werden die Formate dieser Anbieter auf den meisten End­ge­rä­ten un­ter­stützt. Out­sour­cing von Vi­deo­clips hat zudem den Vorteil, dass der eigene Server durch das Streaming nicht zu­sätz­lich belastet wird. Man sollte sich im Vorfeld jedoch über die Nut­zungs­be­din­gun­gen des Video-Hostings in­for­mie­ren und den Ein­bet­tungs­code den eigenen An­sprü­chen ent­spre­chend anpassen.

Möchten Sie bei­spiels­wei­se ein YouTube-Video einbinden, rufen Sie den ent­spre­chen­den Clip über die Plattform auf und entnehmen den Code dem Ein­bet­tungs­me­nü. Hier lassen sich auch zentrale Ein­stel­lun­gen vornehmen, um die Ab­mes­sun­gen des Videos zu de­fi­nie­ren sowie Steu­er­ele­men­te und Vi­deo­ti­tel zu ak­ti­vie­ren. Um zu ver­hin­dern, dass Fremd­in­hal­te auf der eigenen Seite er­schei­nen, empfiehlt es sich außerdem, die Vor­schau­funk­ti­on für al­ter­na­ti­ve Videos zu de­ak­ti­vie­ren. An­dern­falls prä­sen­tiert die Video-Plattform im ein­ge­bun­de­nen Player Inhalte anderer User, denen ähnliche Keywords zu­ge­ord­net wurden – im schlimms­ten Fall die Videos eines direkten Wett­be­wer­bers bzw. einer direkten Wett­be­wer­be­rin.