HTML5Video - Die Crux mit dem iPad und dem iPhone

Donnerstag, 24. Februar 2011, 11:43 Uhr

Dies ist ein Gastartikel von Andreas Zeitler von Mac OS X Screencasts. Andreas erstellt auf der Webseite macosxscreencasts.com mit weiteren Autoren Screencasts über Mac OS X Software. Er hat bereits einen ersten Artikel "Screencasts am Mac" bei uns veröffentlicht.

Da geht man auf eine Webseite mit Video Content (Ich kenne da eine...) und dann können die Videos nicht abgespielt werden. Meistens fangen die Leute dann an Flash zu verfluchen, doch selbst wenn das Video auf dem Desktop ohne Flash spielt muss das nicht unbedingt auch auf dem iDevice der Fall sein. Spätestens jetzt wird's kompliziert! Denn: Warum eigentlich? Warum ist Video nicht gleich Video?

Das Problem ist der Codec, der zur Codierung des Videos benutzt wird - muss iPhone kompatibel sein. Das ist der bekannte H.264. Das iPhone hat einen Chip eingebaut, mit dem die (De) Codierung unterstützt wird. Denn das Abspielen (Decodierung) eines Videos ist eine (Prozess-)aufwändige Geschichte. Dadurch, dass Batterieladung endlich ist, müssen Hersteller Abstriche bei der Codierungsqualität (Diese nennt man "Profile") machen. Mit zusätzlichen "Leveln" kann man weiterhin das Video abgrenzen.

Versucht man nun also ein Video abzuspielen, welches oberhalb eines gewissen Levels beziehungsweise Profiles ist, verweigert das iPhone das Abspielen. Man könnte dann auch sagen, die Qualitätsstufe des Videos ist zu hoch. Das iPhone verkraftet das nicht. Was muss man bei YouTube und Co. also eigentlich beachten, wenn man ein Video einbetten möchte? Was hat HTML5 damit zu tun? Und was gibt es für Programme die beim codieren helfen?

HTML5 Videos einbetten

YouTube - ein einfacher Einstieg

YouTube Videos benutzen standardmäßig den Flash Player - Jedoch nicht immer. YouTube ist bemüht seine Videos für alle iOS, und sonstigen mobilen Endgeräten gleichermassen zur Verfügung zu stellen. Dazu muss man aber auf der Webseite mit (dem Mobile) Safari surfen oder die Apple App (YouTube) benutzen. Neben der bekannten Flash-Integration gibt es bei YouTube Bemühungen eine HTML5 Fallback anzubieten. Dafür muss man aber den iFrame-Code zur Einbindung des Vidoes nutzen. Den iFrame-Code erreicht man folgendermassen:

Embed klicken

Sicherstellen, dass kein Haken gesetzt ist bei "alten Embed-Code benutzen".

Ein kleiner Tipp am Rande: Es ist auch auf dem Desktop möglich YouTube in der technisch fortgeschrittenen HTML5 Version (immer) zu betrachten. Dazu entweder diese Extension installieren, oder der HTML5 Beta hier beitreten. Vor allem neuere (= später hochgeladen) Videos sollten dann nahtlos auf Desktop und mobilen Telefonen direkt auf der Seite spielen.

Vimeo

Bei Vimeo, zumindest bei mir, wird unter den meisten Videos unten rechts ein kleiner Text dargestellt, mit dem man zwischen dem Flash und HTML5 Player wechseln kann. Diese Option wird dann auch im Cookie gespeichert und alle weiteren Videos werden dann eben mit dem präferierten Player abgespielt.

Das \<Video\>-Tag und die eigene Webseite

Hat man eine eigene Webseite wird es bereits schwieriger. Möchte man dort Videos mit HTML5 darstellen muss man sich erst einmal das <Video> Tag des neuen HTML5 Standards anschauen:

<Video src="movie.mov" controls="controls">
your browser does not support the Video tag
</Video>

Unter controls kann man angeben, ob beispielsweise das Video vorgeladen werden soll. Was man vielleicht nicht möchte, wenn die Webseite potentiell auch von mobilen Geräten angesurft wird. Auch ein "autoplay" ist oft nervig.

Apple Bordmittel

Mt QuickTime X liefert Apple ein Werkzeug, mit dem sich der Prozess enorm vereinfachen lässt. QTX kann ein Video als Webseite exportieren, wobei mehrere Versionen eines Videos erstellt werden, welche für verschiedene Devices optimiert wurden und demnach auch unterschiedliche Qualitäten aufweisen. Ruft man die Webseite auf, sucht sich diese automatisch das "richtige" Video aus. Die Exportfunktion befindet sich unter Ablage und nennt sich "Für Web sichern ". Danach kann man auswählen, welche Formate man erstellthaben möchte.

Wer wirklich alles selbst machen will, hier ein paar Hinweise und Tipps, welche ich kurz und knapp weitergeben kann:

Die meisten Encoder (Beispielsweise MPEG Streamclip, Kigo Video Converter, Permute, Turbo H.264) kommen mit Presets für die ganzen iDevices und Androids mit

Oft reicht es (qualitativ) für Desktops die iPad Option mit auszuwählen. Das verringert geringfügig die Qualität, jedoch auch den benötigten Speicherplatz auf dem Server. Plus: Das Video spielt auch auf iPads.

Spielt das Video nicht "sofort", hat man wohl vergessen die "Streaming Option" im Encoder an zu haken. Diese macht, dass das Video nicht erst vollständig heruntergeladen werden muss, eh es abgespielt werden kann. Die genaue Bezeichnung hierfür lautet, zumindest bei Apple Encodern "Streaming: Fast Start".

Die genannten Encoder kann ich selbst empfehlen. Benutze aber eigentlich Compressor. Wer vielleicht seinen eigenen Video Podcast erstellen möchte - noch ein Tipp: Für Mac OS X Screencasts benötige ich von meinem Hi-Res Screencasts jeweils eine Webseiten und eine Download Version. Die Webseiten Version hat eine geringere Auflösung und Qualität. Im Podcast (Download Version) landet eine höhere Auflösung mit schön krisper Darstellung. Das bedeutet zwar pro Screencast knapp 1/3 mehr Speicher (die ungefähre Größe der Webseiten Version im Vergleich zur Download Version), bedeutet aber auch, dass beide Seiten best möglichst beliefert werden. Der Webseiten-Besucher bekommt relativ schnell ein Video zu sehen, der Podcast Abonnent bekommt ein qualitativ hochwertiges Video.

Dieser Artikel wurde eingeordnet unter: iPhone, Tipps und Tricks, iPad, html 5, MPEG Streamclip und videos

HTML5Video - Die Crux mit dem iPad und dem iPhone