Animation im Web ohne Flash?

Veröffentlicht am 4 Juli 2011 um 23:53

Eine Kundenanfrage hat dieses höchst interessante Thema aufgeworfen. Es soll eine graphische Animation erstellt werden, welche durch komponierte Musik unterlegt wird. Das Endprodukt soll nicht als Flash-Film ausgeliefert werden, wie es offenkundig wohl der einfachste Weg wäre, da dann Endgeräte wie Macs, iPhone, iPads ohne entsprechende Plugins nicht kompatibel wären. Zwar möchte ich behaupten, dass die mobile Generation der iPhone Nutzer vermutlich ein entsprechendes Plugin installiert hat, da der Ruf nach Flash auch bei iPhone Usern zu hören ist ( http://www.macnews.de/software/meinung-der-iphone-nutzer-will-flash-herr-jobs-59278 ), aber wollen wir mal nicht zu sehr ins Detail gehen.

Die Überlegung ist nun: Wie ersetzt man die Funktionalität eines Flash Videos durch andere Techniken und gewährleistet aber dennoch höchstmögliche Cross-Browser / Cross-System Kompatibilität?

In Spritely scheint hier eine sehr belastbare Alternative für die graphischen Animationen gefunden. Wie man schön an der Seite selbst sehen kann, klappen Funktionen wie Pan in jedwede Richtung und sogar Animationen via Sprites. Gerade in Bezug auf Suchmaschinenoptimierung sind Sprites sowieso eine tolle Technik, dazu in einem anderen Artikel mehr. Die Kompatibilität ist bis hinunter zum Internet Explorer 6 angegeben, ebenso auf Firefox, Chrome, Opera und Safari. Safari? Richtig! Damit ist auch die Kompatibilität zu iPhone, iPad und iPod Touch gegeben. Zusätzlich wird Android aufgeführt. In unserem eigenen Test konnten wir Symbian (Nokia) noch als positiv einstufen. Auf dem BlackBerry OS 5 bewegt sich der Hintergrund, die Vögel sind aber nicht zu sehen, dementsprechend auch nicht zu steuern. Ob es sich hier lediglich um ein Problem mit der Animation handelt oder am System liegt, testen wir in Kürze. Das Ergebnis: Für unsere Problemstellung, nämlich eine Flash-Alternative, damit auch iPhone, iPad und Konsorten die Inhalte korrekt sehen können, ist diese Kompatibilität ausreichend. Den „Ein-für-Alles“-Könner konnten wir derzeit nicht identifizieren. Wenn jemand einen kennt – her damit :-)

Als nächstes galt die Suche einem kompatiblen Sound Player, damit die komponierte Musik wiedergegeben werden kann. Ja, natürlich sind wir uns darüber im Klaren, dass die Synchronität zwischen Audio und Video ein nicht zu unterschätzender Faktor ist, besonders auf Mobilgeräten. Da wir hier auf Basis von jQuery arbeiten, könnte sich der Eventhandler $(document).ready() anbieten, um die Ressourcen erst nach komplettem Laden abzuspielen. Das sind dann Details. Nun zu den verschiedenen Sound Playern:

jPlayer: Schöne Geschichte, leider auf keinem mobilen Endgerät zum Laufen gebracht. Liegt das nur an der Steuerung, oder ist es doch eher so, dass HTML5 auf mobilen Endgeräten noch nicht unterstützt wird? Der HTML 5 Web-Standard befindet sich halt noch im Entwurfsstadium und ist noch nicht vom W3C veröffentlicht bzw. als Recommendation ausgesprochen worden. Daher: Schön, dass jPlayer HTML5 nutzt, hilft bei den mobilen Endgeräten nur leider nicht. BlackBerry und Symbian konnten zwar den Play Button anklicken, mehr passierte dann aber nicht.

Fancy Music Player(Nicht mehr verfügbar): Nett, da in dieser Demo bereits eingebaut ist, dass die Audio Wiedergabe von Track zu Track springt. Dabei dachten wir bereits an eine sequentielle Audiowiedergabe. Die graphischen Animationen laufen einfach hintereinander weg und der dazu passende Ton könnte in Kapiteln zerlegt sequentiell abgespielt werden. Dies hätte eine reduzierte Transfergröße beim ersten Aufruf der Webseite zur Folge, was besonders den mobilen Endgeräten zugute kommen würde. Auch hier konnte leider auf den Handies kein Ton wiedergegeben werden. Scheidet aus.

DrPlayer: Sieht nett aus, tolle Funktionalität, benötigt leider doch auch das Flash Plugin. Scheidet aus.

Audio Player | jQuery & NodeJS (1 | 2): Zwar hat der Autor noch nicht alle Probleme behoben, doch bei der Komplexität des Themas ist dieser Ansatz vermutlich der Vielversprechendste. Damit ist meine ToDo für Experimentelles auch schon gefüllt, dieses Thema wird uns sicher noch länger beschäftigen. Nach ein paar Tests werde ich meine Ergebnisse samt Fazit präsentieren – denn dass mobile Endgeräte einfach auf den Ton verzichten sollen oder per Flash-Weiche einfach hart ein vorgerendertes .mp4 File erhalten wenn Flash nicht unterstützt wird, wäre entgegen der Maßgabe – und ich bin der Meinung, es muss auch komplett ohne Flash gehen :-)