Embed Size (px)
DESCRIPTION
Tutorial of include of Video in HTML5
Citation preview
VIDEO IN HTML5
Einführung
Kurze Einführung HTML5Erstmals 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 SGML-Parser 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-Pluginwie 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 Fallbackdefiniert 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 >
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" />
<!-- WebKit video --> <source src="__VIDEO__.OGV" type="video/ogg" />
<!-- Firefox / Opera --> <!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there --> <imgsrc="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playbackcapabilities, please download the video below" /> </object>
</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
