HTML5 Videos erstellen & einbinden / einbetten

HTML5 ist in aller Munde und damit auch neue Wege multimediale Erlebnisse durch das Web zu genießen. Videos und Audio-Inhalte können eingebettet werden und genau da ist das Thema, was ich heute mal ein wenig beleuchten will, wie erzeugt man HTML5 Videos, wie erfolgt die Einbettung und das ganze Thema drumherum.

Was ist HTML5?

HTML5 ist quasi der Nachfolger von HTML4 und XHTML bzw. die Auszeichnungsspache / Programmiersprache um Internetseiten und in der heutigen Zeit auch Apps zu programmieren, ich denke da nur an das Thema was mich besonders interessiert und sich HbbTV bzw. SmartTV nennt. Neu ist die Unterstützung bzw. generell die Funktionalität Audio und Video Dokumente einzubinden bzw. 3D Grafiken. Brauchte man damals bzw. teils heute noch für Videos auf gewissen Plattformen wie YouTube das Flash Plugin, so kann man theoretisch in Sachen Videos in Zukunft dank direkter Unterstützung darauf verzichten. Wichtig dabei ist aber zu bedenken, dass der Browser des Betrachters einer Website HTML5 auch unterstützen muss und viel wichtiger ist, mit HTML5 Videos können auch Tablet-PCs und Smartphones problemlos Videos aus dem Internet wiedergeben, was für manche Smartphone mangels Flash Integration/Plugin nicht möglich war.

HTML5 Videos erzeugen und einbetten?

Und hier fangen wir direkt auch einmal an, ein Irrtum zu berichtigen, HTML5 ist kein Videoformat und HTML5 Videos kann man auch schlecht erzeugen, auch wenn ich das so reißerisch in der Überschrift geschrieben habe, vielmehr ist es so, dass wir mit HTML5 ganze 2 neue Elemente auch Tags genannt nutzen können, die sich nennen

  • audio
  • video

Was heißt das nun genau? Wenn wir von einem HTML5 Video sprechen, dann ist dies kein Videoformat, sondern nur die Art und Weise wie wir ein Video auf einer Internetseite einbinden. Fangen wir doch mal mit einem Beispiel an, wie einfach ein Video mit HTML5 eingebunden werden kann, der HTML Quellcode könnte lauten:

<video src="urlaub.mp4" controls="controls">
</video>

Das wäre aber nur eine ganz einfache Variante ein Video einzubinden, die niemandem was helfen wird.

HTML5 Videoformate

Die Crux an der ganzen Sache mit den HTML5 Videos ist, dass es kein geregelten Standard gibt, welches Format dahinter steckt, man nun nutzen muss oder kann, geschweige denn soll. Dazu kommt dann noch der Punkt, dass nicht jeder Browser jedes Format wiedergeben kann. Gebräuchliche Videoformate für die HTML5 Video-Einbettung in Websites sind momentan:

  • Ogg Theora
  • Mpeg4 (H.264)
  • WebM

Die optimale Lösung, der wir uns dann auch widmen werden ist demnach, einfach alle Formate anbieten. Ein weiterer Punkt den man auch mal gehört haben sollte, dass in jedem Browser die nativen eingebundenen Player für HTML5 Videos anders aussehen.

So erstellen und betten Sie eigene HTML5 Video ein!

Jetzt geht es los, unser erstes eigenes Video soll online gehen, was wir dazu brauchen ist einfach, dass Video was online publiziert werden soll, den passenden Webspace und die passende Software. Letzterer Punkt ist der Punkt, mit dem wir anfangen in unserem Vorhaben ein HTML5 Video online zu stellen. Die einfachste und bequemste Methode bietet uns hier die Software Freemake Video Converter. Nicht nur, dass die Software kostenlos ist, nein sie konvertiert uns so ziemlich von allen Formaten in alle Formate sämtliche Quellmaterialien.

2012-03-html5videoDemnach ist der 1. Schritt, den Freemake Video Converter herunterzuladen, zu installieren, aber als Tipp sei gesagt, beim installieren gut aufpassen, dass ihr euch nicht das Toolbar mit installiert (Haken entfernen). Wenn die Software installiert ist, dann starten wir diese und fügen unser Quellvideo ein, entweder per Drag & Drop reinziehen oder auf den Button mit dem +Video drücken und manuell auswählen.

Nun haben wir das Quellvideo was dann am Ende ein HTML5 Video werden soll, demnach gehen wir in der unteren Auswahlleiste, wo alle Formate stehen nach rechts, so lange, bis wir den HTML5 Button finden, den wir dann auswählen und dann folgenden Dialog wie in der Grafik sehen sollten.

Hier können wir das Profil so lassen wie es ist, der Ausgabe-Ordner kann natürlich verändert werden und wenn das passt, klicken wir auf konvertieren und unser HTML5 Video wird erstellt.

HTML5 Video Konvertierung abgeschlossen – und nun?

Nachdem unsere Konvertierung abgeschlossen ist, können wir alle Anwendungen schließen und in den Ausgabe-Ordner gehen, den wir vorher definiert haben. Hier findet sich nun ein Verzeichnis, welches den Name der Quelldatei trägt, in meinem Beispiel hieß die Ausgangs-Datei musikvideo.mpg daher habe ich nun ein Verzeichnis im Ausgabeordner, der sich entsprechend auch musikvideo nennt.

2012-03-html5video2

Was wir nun hier sehen, sind 4 verschiedene Dateien, einmal 3 verschiedene Videos von Mpeg 4 (H.264, über Ogg bis hin zu dem WebM Videoformat, daneben noch eine Example also Beispiel HTML Datei, die wir einfach mal öffnen, denn dort enthalten wird uns schon der passende Quellcode präsentiert, den wir dann auf unserer Website hochladen müssen.

Das HTML Video geht online?!

Zum Abschluss kopieren wir nun die Videos auf unseren Webspace via FTP hoch, natürlich in das korrekte Verzeichnis wo dann auch die HTML Datei liegt und danach kopieren wir per copy & paste also kopieren und einfügen den vorgegebenen Code in unser Ziel HTML Dokument oder auch in unseren Blog-Eintrag, wo auch immer man das Video verwenden will.

Das heißt in meinem Beispiel hier konkret, die Dateien

  • musikvideo.mp4
  • musikvideo.ogv
  • musikvideo.webm

werden auf den Webspace hochgeladen und in meine Zieldatei oder den Blog-Eintrag füge ich am Ende noch fix folgenden Code ein:

<video id=0 controls width=640 height=426>
<source src="musikvideo.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="musikvideo.webm" type='video/webm' >
<source src="musikvideo.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>

Fertig ist unser HTML5 Demovideo!

HTML5 Video in XHTML / HTML4 ?

In dieser Frage kann vielleicht mein Co-Autor Fabian noch etwas hinzufügen, Fakt ist, dass man den obigen Code bzw. den der vom Freemake Video Converter erzeugt wird in ein normales HTML4 / XHTML valides Dokument einfügen kann, die Funktionalität hat bei meinen Tests fast immer geklappt nur der IE wollte manchmal nicht so wie ich das wollte.

Sebastian ist IT-Techniker sowie Berater aus Leidenschaft. Er betreibt einen Computerservice in Leipzig, bei dem die individuellen Wünsche & Visionen des Kunden im Mittelpunkt stehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.