Videos auf iPhone und iPad

Viele, die sich mit dem Thema Videos auf Webseiten für iPhone und iPad abzuspielen schon beschäftigt haben, landen früher oder später immer wieder bei dem Problem, dass manche Videos einfach nicht abgespielt werden wollen. Das Einbetten der Videos ist ja im Regelfall ziemlich einfach, entweder nutzt man direkt die HTML5-Auszeichnung oder ein kleines JavaScript-Snippet um einen Fallback für einen Flash-Video-Player einzubinden. Das soll aber in diesem Post gerade kein Thema sein. Vielmehr will ich hier aus aktuellem Anlass auf die Encodierung der Videos eingehen. Ungeachtet der Präsenz von OGG Theora und VP8 auf anderen Browsern dreht sich die aktuelle Problematik hier um h264, da dies auf dem iOS immer noch den Vorzug erhält.

Unterschiede bei iOS-Geräten

Man möchte daher meinen, dass es genügen soll, die Videos auch auf h264 zu konvertieren. Aber dies ist leider nicht so einfach der Fall, denn wenn ein Video im iPad läuft, heißt das noch lange nicht dass das iPhone (im aktuellen Fall iPhone 3GS) das genau so sieht. Stattdessen passiert es schonmal dass der Safari das Abspielen verweigert und einfach nur einen durchgestrichenen Play-Button anzeigt. Mit Hilfe der Debug-Konsole bekommt man dann die "hilfreiche" Nachricht:

Quicktime: Movie could not be played.

Das iPad hatte in dem Fall keine Probleme. Wenn man ein wenig im Netz recherchiert, kommt man schnell zu dem Schluss, dass es nicht reicht den richtigen Codec zu wählen. Vielmehr muss man sich noch mit den Variablen (wie Bitrate für Audio und Video) der Codierung rumschlagen. Da haben natürlich nicht nur Apple-Geräte unterschiedliche Ansprüche. Ein Blogeintrag bei Zencoder versucht z. B. die besten Konfigurationen für die einzelnen Geräte zusammenzufassen.

Nun kann man sich natürlich daran machen und nach den besten Codierungsoptionen suchen. Hierbei hilft XCode mit dem iOS Simulator, denn auch da tritt der "Fehler" im simulierten iPhone auf, aber nicht dem iPad. Das macht zumindest das lokale Testen möglich.

Handbrake für die schnelle Hilfe

Mit Hilfe der Vorlage von Zencoder habe ich mich im aktuellen Fall also versucht, das Video kompatibel zu konvertieren. Der erste Versuch schlug natürlich fehl. Dankenswerterweise hat aber das Videokonvertierungstool meiner Wahl "Handbrake" (Alternativen) direkt ein Preset parat, welches für Apple-Geräte angelegt wurde. Mit dem Preset "Apple - Universal" habe ich es also nochmal versucht, und siehe da, nun lief das Video einwandfrei. Die Konvertierungsmöglichkeit wurde also gefunden.

Auswirkungen

Für den Admin der Seite hieße das nun, alle Videos, die er jemals hochgeladen hat, mit den neuen konvertierten Varianten nochmals hochzuladen. Dies ist natürlich nur für kleinere Seiten praktikabel, im aktuellen Fall hat es allerdings ausgereicht um zumindest die wichtigsten Inhalte noch auf iPhone-Kompatibilität zu trimmen.

Andere Lösungen

Natürlich ist das lokale Encodieren nicht für jede Seite ratsam. Es erspart allerdings den Einsatz der serverseitigen Verarbeitung (via ffmepg) oder das Einbinden von externen Diensten (wie Zencoder). Spätestens wenn man mehrere Videovarianten für verschiedene Größen und Devices anbieten will, ist das lokale Konvertieren dann doch keine pragmatische Lösung mehr, und man sollte zu ffmpeg oder einem SaaS zur Videokonvertierung greifen. 

Icons by: Dirceu Veiga

Johannes Haseitl
  • Partner
  • Senior-Drupal-Entwickler

Johannes lebt in München und ist leidenschaftlicher Familienvater. Seit 2006 arbeitet er mit Drupal und initiierte 2010 die Gründung von undpaul.

Beim Mario Kart oder Gokart-Rennen kann er ein harter Gegner sein. Johannes hat schon mal eine Radtour von den Alpen nach Rügen gemacht.