Video in HTML5

Einf端hrung

VIDEO IN HTML5

Kurze Einführung HTML5 Erstmals seit der Entstehung von HTML wird die Sprache nicht mehr als Dialekt von SGML, sondern als eigene Sprache, die von SGML inspiriert wurde, definiert. Dies wird damit begründet, dass auch moderne Browser HTML nicht mit einem SGMLParser sondern einem für das Web passenden Parser verarbeiten. Wie diese Parser funktionieren ist aktuell nicht definiert. HTML5 will dies durch die Definition eines HTML-Parsers ändern und so vermeiden, dass es Unterschiede zwischen den HTML-Parsern der verschiedenen Browserhersteller gibt. Das besondere an dem in HTML5 enthaltenen Parser ist, dass er nicht nur das erlaubte Vokabular versteht, sondern auch alle anderen Elemente, die in früheren Versionen vorhanden waren oder nur als proprietäre Elemente existierten. Durch diese genaue Definition will HTML5 sicherstellen, dass der Parser zu den im Web vorhandenen Dokumenten rückwärtskompatibel ist.

<!DOCTYPE html>

HTML5 & CSS3 Html5 Video Html5 Audio Geolocation @font-face Canvas SVG

rgba () border-radius box-shadow css-gradients opacity Input-attributes

Warum die ganze Aufregung? Adobe’s lazy and the Google’s motto is bulls#*% - Steve Jobs - CEO Apple Seit Safari und die Einführung webbasierter Produkte von Apple , nimmt die Geschwindigkeit um HTML5 stetig zu. Keine Plugins, aber unterschiedliche Video-Codecs Zum Abspielen sind mit HTML 5 keine Browser-Plugin wie z.B. Silverlight oder Flash Player nötig. Voraussetzung für den <video>-Tag ist lediglich ein aktueller Browser wie Firefox (ab 3.5) oder Safari (ab 4). Leider wurde bisher kein gemeinsamer Nenner von den Browserherstellern gefunden, welche Video-Codecs eingesetzt werden dürfen/müssen. Die möglichen Codecs hängen deshalb vom Browser ab.

<video> & codecs 

Firefox kann Videos mit Theora-Codec in einem Ogg-Container (.ogv) abspielen. Der dazugehörige Ton muss als Vorbis vorliegen. Für die Tonspur wäre auch das Wave-Format möglich, das aufgrund der fehlenden Kompression jedoch in der Regel im Web wenig sinnvoll ist.



Safari hingegen setzt auf das MPEG-4-Format mit dem bekannten und effizienten Codec-Duo H.264 (Video) und AAC (Audio). Dies verspricht eine bessere Qualität als Theora, allerdings stossen die MPEG-4-Lizenzgebühren bei den anderen Herstellern wie Opera nicht auf Gegenliebe.



Erwähnenswert: Die beschriebenen HTML 5/Video-Features sind auch in der mobilen Safari-Version für das iPhone verfügbar und einsetzbar (ab iPhone OS 3).



Google Chrome unterstützt in der aktuellen Beta (ab 3.0.182.2) sowohl Theora als auch H.264. Allerdings gibt es den H.264-Support nur in der von Google selbstvertriebenen Browser-Variante (also Google Chrome), wohingegen das zugrundeliegende Open Source Projekt Chromium dies aus besagten Lizenzkosten nicht kann.



Von Microsoft gibt es bisher noch keine Informationen, wie die Firma zu diesem Thema steht. Für den IE muss deshalb ein Fallback definiert werden (siehe unten). Update: Internet Explorer unterstützt H.264.

MIME-Type für den Server Serverseitig muss beim Progressive Download, also dem Abspielen von einem gewöhnlichen Webserver, nichts besonderes beachtet werden. 

Bei Ogg-Dateien (.ogv) könnten eventuell noch serverseitige Probleme entstehen, wenn der MIME-Type für Ogg-Videos nicht gesetzt ist. Dies lässt sich jedoch beheben, wenn man eine htaccess-Datei mit dem Befehl AddType video/ogg .ogv angelegt. Hinweis: Nach dem Anlegen der htaccess-Datei zum Ausprobieren den Browser-Cache löschen!

Videodatei einbinden Das erste Beispiel zeigt, wie man ein Video auf einfachste Weise einbindet. Es wird lediglich die GrĂśsse festgelegt. Der Parameter autoplay sorgt dafĂźr, dass dasVideo sofort abgespielt wird. <video src="test.ogv" width="320" height="240" autoplay> This browser is not compatible with HTML 5 </video> Firefox nimmt Ogg, Safari nimmt MPEG-4. Und was macht Chrome, der beides kann? Hier wird das oberste verwendet. <video width="640" height="480" autoplay> <source src="test.mp4" type="video/mp4" /> <source src="test.ogv" type="video/ogg" /> This browser is not compatible with HTML 5 </video>

Fallback & Steuerung Besser als ein Text wäre natürlich eine wirkliche Alternative anzubieten. Dies könnte beispielweise ein Code sein, der das Video im Flash Player abspielt. Steuerung (Controls) In der Regel werden Bedienelemente benötigt, damit der Nutzer das Video z.B. pausieren oder darin spulen kann. Die Browser bringen deshalb von Haus aus eine „Standard-Bedienleiste” mit, die allerdings alle unterschiedlich aussehen (links: Firefox, rechts: Safari). Beim iPhone öffnet sich der (integrierte) Mediaplayer, der auch für die YouTube-Wiedergabe verwendet wird.

Videotags Beispiele <video width="640" height="360" poster="intro.png" controls autobuffer >

</video>

h.264 und crashes! Das Einbinden ist ein Kinderspiel oder? Aber was ist mit dem Container um das ominĂśse mp4 / h.264? Elementare Schwierigkeiten tauchten beim formatieren! Im ersten Beispiel bei der Anlieferungen lief zwar der Ton aber kein Bild. Im zweiten Beispiel wurde das mp4 nicht gestreamt. Wichtig war die Auswahl der korrekten Software. Zum Taggen und zuschneiden empfehle ich xMedia Recode oder Adobe. Umwandeln des Filmes in Ogg und Theora mit Miro Video Converter. Encoden und StreamfĂ¤hig durch Handbrake.

Links zum Thema http://camendesign.com/code/video_for_everybody http://diveintohtml5.org/video.html

Framework http://www.projekktor.com/ http://jilion.com/sublime/video

Turn static files into dynamic content formats.

Create a flipbook