Surfen Sie mit einem mobilen Endgerät? Dann sehen Sie wahrscheinlich bereits, dass wir unsere Website auf den neusten Stand gebracht und ein für mobile Engeräte optimiertes WordPress-Theme entwickelt haben. Im folgenden Artikel möchte Ich ein paar nützliche Tools und Ressourcen vorstellen, die mir im Zuge der Entwicklung untergekommen sind.

Um Iphone/Ipod/Android-Usern das “Mobile-Theme” anzeigen zu können, während normale Browser und das Ipad (aufgrund des grösseren Screens) das “Standard-Theme” zur Verfügung gestellt bekommen, verwenden wir auf jungerömer.net das Plugin Mobile Theme Switcher. Es ermöglicht das komfortable Einstellen von jeweils unterschiedlichen Themes für Iphone, Ipad und Android.

Wer ganz genau bestimmen möchte, wie bestimmte Browser und Systeme behandelt werden sollen, dem empfehle Ich folgendes Script: Detect Mobile User Agents & Browsers.

Prinzipiell gilt: Natürlich ist auch unsere Website nicht für ALLE mobilen Engeräte optimiert, sondern lediglich für Smartphones der neueren Generation, wie Apples iPhone und Android-Telefone, sowie für das Ipad. Allein die schiere Anzahl der unterschiedlichen Browser und Betriebssysteme auf dem mobilen Markt machte diese Fokussierung notwendig. Die eigentliche Herausforderung ist dabei die Optimierung des Videoplayers. Weil für Videos auf mobilen Endgeräten aktuell kein einheitlicher Standard existiert müssen dabei leider stets Kompromisse gemacht und Workarounds gefunden werden. So können wir beispielsweise Video-Support für das Iphone 3 erst nachreichen, sobald das nächste Update für das JW-Player-Plugin erfolgt (s.u.).

Weder Apples Iphone noch das Ipad unterstützen bekanntlich den weit verbreiteten Adobe Flash Player, den immer noch de-facto Standard für die Bereitstellung von Video im Web. Aufgrund dieses Umstands müssen Webentwickler die Videocontent für diese beiden Endgeräte zur Verfügung stellen möchten eine HTML5-Variante mit Flash-Fallback implementieren. Doch damit sind die Probleme noch nicht gelöst: Das Iphone 3 kann zum Beispiel nur Videos mit einer maximalen Auflösung von 640×480 Pixel abspielen, während das Iphone 4 grössere Videos automatisch skalieren kann. Dazu hier ein Link auf die Spezifikationen von Apple: Safari Web Content Guide. Diese Punkte gilt es jedenfalls zu beachten, wenn bestimmte Endgeräte bedient werden sollen.
Eine hervorragende Einführung in die Vor- und Nachteile von HTML5 (und die Bereitstellung von Videos für diverse Plattformen) bietet diese Website: www.diveintohtml5.org. Sehr empfehlenswert.

Für die Integration eines HTML5 Players mit Flash-Fallback innerhalb von Standard-WordPress-Seiten gibt es bereits einige brauchbare Plugins. Auf unserer Website kommt das JW Player Plugin for WordPress zum Einsatz.
Wenn auch im Vergleich zu anderen Lösungen etwas unflexibel in Bezug auf die Einstellmöglichkeiten ist dieses Plugin aus dem einfachen Grund empfehlenswert, weil es direkt von den Entwicklern von LongTailVideo kommt, die für den weit verbreiteten Flash-Videoplayer JW Player verantwortlich zeichnen. Dieser ist als Flash-Fallbackvariante implementiert. Leider muss man in der aktuellen Version noch auf die Möglichkeit verzichten Filme mit unterschiedlichen Codecs/Aulösungen bereitzustellen. Laut LongTail wird diese Option mit dem nächsten Update des Plugins (5.5) ergänzt.

Knifflig war auch die Integration eines HTML5 Players in den Lightboxen auf der Startseite. Diese sind zwar für das aktuelle Junge Römer Mobile-Theme irrelevant (es gibt sie in diesem Theme nicht), mussten jedoch ebenfalls angepasst werden, damit auch auf dem Ipad das Abspielen von Videos innerhalb einer Lightbox möglich wird (denn User mit Ipad sehen die Website mit “Standard-Theme”).

Hier konnte das JW Plugin nicht zum Einsatz kommen. Um das Lightbox-Plugin WP Prettyphoto mit HTML5 Videotags bei gleichzeitigem Flash-Fallback befüllen zu können war ein Workaround notwendig (da HTML5 Video von dieser Lightbox nicht nativ unterstützt wird). Als Grundlage für unsere Lösung dient eine Erweiterung für das Plugin – basierend auf dem aktuellsten Code von Prettyphoto – namens Prettyviddy.

Da wir unsere Videos mit H264 Codec bereitstellen, musste aber zusätzlich noch eine Möglichkeit gefunden werden wie Firefox-Browser erkannt und abgefangen werden können. Dieser Video-Codec wird nämlich von Firefox nicht unterstützt – Firefox vermeldet zwar er könne HTML5 Videos abspielen, er kann jedoch nur Videos im Format .OGG (Theora) verarbeiten. Firefox-Usern müssen daher H264 Videos immer im Flash-Fallbackplayer angezeigt werden.

Für die Überprüfung inwieweit Browser gewisse Features von HTML5 (nicht nur das Video-Tag) unterstützten empfiehlt sich ein Blick auf diese grossartige Klasse bzw. deren umfangreiche Dokumentation: Modernizr erlaubt abzufragen, ob gewisse HTML5-Features vom aktuellen Browser unterstützt werden.

Für die überarbeitete Lightbox habe Ich Prettyviddy damit erweitert. In der Function _getFileType(itemSrc) habe Ich bei der Videoabfrage folgende Weiche eingebaut:

else if(itemSrc.indexOf('.mp4') != -1){
if (Modernizr.video && Modernizr.video.h264)
{
	return 'video_html';
}
else {
	return 'video_flash';
};

Wenn das Prettyviddy-Script ein Video mit der Endung .mp4 erkennt, wird via Modernizr abgefragt, ob der aktuell vom User verwendete Browser erstens HTML5 Video abspielen kann und ob er zweitens H264 Video abspielen kann. Ansonsten wird das Video in Flash angezeigt – und damit gelingt das Abfangen von Firefox.

Abschliessend kann man nur sagen, dass Videos auf mobilen Websites aktuell die grösste Hürde für Entwickler darstellen. Man kann nur hoffen, dass sich in diesem Bereich gewisse Standards möglichst rasch durchsetzen.