Mpg4 Videos mit HTML Code einbinden

Dank HTML 5 ist das Einbinden von Videos in Webseiten ein gutes Stück einfacher geworden und auch ohne große Programmierkenntnisse können Videos direkt in den HTML-Text geschrieben werden.

Du musst dir dabei nicht allzu viele Gedanken machen, in der Regel ist das Einbinden eines Videos in eine Website spielend leicht, wenn du ein paar einfache Schritte befolgst.

Hochladen, einbinden, abspielen

Das Einbetten in den HTML-Code und das direkte Abspielen im Browser hat für dich verschiedene Vorteile. Vor allem musst du dir keine Sorgen mehr machen, dass bei Zugriffen die Browser anderer Leute durch Plug Ins crashen. Ein Schelm, wer da an Flash denkt.

Zunächst einmal musst du dein gewünschtes Video ins Internet laden. Hierzu solltest du über genügend Speicherplatz bei deinem Webhost verfügen. Beim Homepage-Baukasten stehen dir als Premium Paket Plus Kunde dafür 2 GB zur Verfügung. Besonders HD-Videos verschlingen auch in wenigen Minuten mehrere hundert Megabyte. Du solltest dir also vorher überlegen, wie viele Videos du einbinden möchtest und in welcher Qualität dies alles zur Verfügung stehen soll.

Derzeit gibt es diese verschiedenen Video Formate

Das offene Ogg Theora, welches etwa von Firefox unterstützt wird und das weit verbreitet mp4-Format mit dem Codec h.264. Dieser Kompressionscodec sorgt für hohe Qualität bei niedriger Bitrate und wird etwa auch von YouTube benutzt. Viele Kameras und Smartphones nehmen sogar direkt in mp4-Files auf.

Um möglichst viele User zu erreichen, solltest du aber mindestens diese beide Formate bedienen, die Browser suchen sich dann bei Zugriff das passende Video.

Browserunterstützung für Verwendung von <video>

Technisches Einbinden in HTML 5

Das Einbinden des Videos braucht nur folgenden Code Schnipsel:

<video width="320" height="240" controls>
  <source src="mein-video.mp4" type="video/mp4">
  <source src="mein-video.ogg" type="video/ogg">
</video>

Die Befehle <video> und </video> beschreiben dabei Beginn und Ende der Einbettung, width und height legen die Breite und die Höhe des Videos / Videoplayers fest, controls zeigt dir die Control Buttons, wie beispielsweise den Play Button. Bei source src="" muss der entsprechende Link zu deinem Video eingefügt werden. Liegt dein Video in deinem Account unter Dateien, dann sieht der Link beispielsweise so aus: http://www.homepage-baukasten-dateien.de/HIER-STEHT-DEIN-USERNAME/mein-video.mp4. Den Link findest du heraus, indem du bei Dateien einfach auf dein Video klickst und du, sobald dieses im Browser erscheint, einfach die URL aus der Browserleiste kopierst und an der entsprechenden Stelle einfügst.

Mit type beschreibst du lediglich, dass der Browser sich automatisch das richtige Videoformat heraus sucht.

Zusätzlich bietet die HTML-Einbettung dir noch weitere Attribute, mit denen du deine Videoeinbettung beschreiben kannst. Vereinfacht sieht dies so aus:

<video width="320" height="240" poster="video-standbild.jpg" autobuffer autoplay controls>
    <source src="mein-video.mp4" type="video/mp4">
    <source src="mein-video.ogg" type="video/ogg">
    Leider unterstützt Ihr Browser kein HTML 5!
</video>

Übersicht der möglichen <video> Attribute

Mit dem Befehl src verlinkst du auf das Quellvideo, zusätzlich bieten dir width und height die Möglichkeit, die Größe des Videos / des Players im Browser anzupassen. Ohne diese Befehle zeigt der Browser deiner User in der Regel einfach nichts an. Bei der Wahl der Attribute solltest du auf die korrekte Relation der Dimensionen achten, in der Regel sollten deine Videos 16:9 sein. Wenn du im Kinoformat arbeitest, ist die Relation 2,35:1, das alte Fernsehformat oder Bilderslideshows sind im Format 4:3.

Die meistverwendeten Angaben sind hier 320 x 240, 640 x 480 oder ähnliche Verhältnisse. Was auch funktioniert: Bei der width 100% und bei der height auto. Damit passt sich der Player im richtigen Verhältnis an die Breite deiner Seite an und die Höhe wird automatisch ermittelt.

Der Verweis poster legt eine Bilddatei, die du ebenfalls hochladen musst, als Titelbild des Videos fest. Dieses Titelbild wird angezeigt, wenn das Video noch nicht abspielt. Achte hierbei darauf, dass das Bild die gleichen Dimensionen des Videos hat.

Mit autobuffer erlaubst du Usern, das Video zu buffern - dadurch kann das Video bei langsameren Verbindungen vorladen. Das ist besonders praktisch, wenn du verstärkt mobile User ansprechen möchtest.

Bindest du den Befehl autoplay ein, so beginnt dein Video sofort, sobald die HTML Seite aufgerufen wird. Dementsprechend sollte das Video auch sofort sichtbar sein, andernfalls senkst du den Wert von Video und Userexperience durch autoplay eher.

Mit controls aktivierst du das Kontrollelement, mit dem User sich durch die Timeline scrollen können und das Video selbstständig starten und beenden können.

Der Befehl loop startet das Video einfach wieder von vorne, sobald es durchgelaufen ist, zusätzliche Befehle beinhalten etwa muted (Video wird stumm abgespielt) oder preload (Wert, der bestimmt, wie viel der Videodatei automatisch vorgeladen wird).

Falls dein Webseitenbesucher keinen aktuellen Browser benutzt und dementsprechend das in HTML eingebundene Video nicht abspielen kann, dann wird der Hinweis "Leider unterstützt Ihr Browser kein HTML 5!" angezeigt.

Mehr als ein paar Zeilen braucht es nicht

Und das war es auch schon. Mehr als diese paar Codezeilen musst du nicht verwenden, um jedes beliebige Video direkt, passend, schnell und direkt in deine Seite einzubinden. HTML 5 ist somit auch für Videos ein extrem nützliches Tool, mit dem du deinen Usern eine multimediale Internetpräsenz bieten kannst, ganz ohne Informatikstudium.