© DrHitch/Shutterstock.com
HTML 5 meets GWT

2 HTML5-Webanwendungen mit GWT


HTML5 ermöglicht erstmals die native Einbindung von audio-visuellen Elementen in Webanwendungen. Auch das Persistieren von Informationen auf der Clientseite, ja sogar der Betrieb von Webanwendungen komplett ohne Netzwerkverbindung ist plötzlich möglich. Hier greift das Google Web Toolkit (GWT) dem Entwickler bei der Realisierung tatkräftig unter die Arme. Way to go Google!

Im ersten Teil des Tutorials wurde das HTML5-Canvas-Element behandelt. Dabei wurde eine erste Version der exemplarischen, virtuellen Whiteboard-Anwendung realisiert. Doch einige Funktionalitäten fehlen noch, daher wird der zweite Teil dieses Tutorials auf der hoffentlich schon liebgewonnenen Whiteboard-Anwendung aufbauen. Für drei weitere HTML5-Elemente werden in der Folge die theoretischen Grundlagen sowie deren Einbindung in bestehende GWT-Anwendungen erläutert:

  • Das Video- bzw. Audioelement
  • Client-Side Storage (LocalStorage und SessionStorage)
  • Der Application Cache

Auch dieses Tutorial-Beispiel wurde auf die Google App Engine deployt und ist unter http://jm-whiteboard-advanced.appspot.com verfügbar. Den komplette Sourcecode finden Sie unter http://www.entwickler-press.de/shortcuts.

starke_abb2.1.png

Abbildung 2.1: HTML5 Whiteboard mit Videoelement

I don’t read – I wait for the Movie

Spätestens seit dem Erfolg von Videoportalen wie YouTube oder Vimeo sollte jedem Entwickler klar sein, dass die Einbindung von Videoinhalten in eine Webanwendung zum aktuellen Stand der Technik gehört. Aus Sicht der Benutzerfreundlichkeit macht es Sinn, bisher textuell dominierte Teile einer Anwendung (z. B. das Handbuch) um audio-visuelle Alternativen zu ergänzen. Ohne Plug-ins von Drittanbietern, wie etwa Apple QuickTime oder Adobe Flash, war es bisher unmöglich, Videoinhalte direkt – nativ – in eine Webanwendung einzubetten. Mit dem HTML5-Videoelement steht nun aber eine Möglichkeit zur Verfügung, Videos auf der Clientseite ohne Installation zusätzlicher Plug-ins wiederzugeben. Das Whiteboard bedient sich des Videoelements um das langweilige textbasierte Hilfemenü durch bewegte Bilder zu ersetzen. Listing 2.1 stellt die Einbettung eines Videos, inklusive einer bereits bekannten Legacy-Behandlung, schematisch dar.

//Does the browser support a HTML5 Video Element? 
Video video = Video.createIfSupported();
if (video != null) {
video.getVideoElement().setSrc("someVideo,mp4");
pnlMain.add(video);
}
else {
Label lblError = new Label("Please update your browser!");
pnlMain.add(lblError);
}

Listing 2.1

So einfach kann man ein Video einbetten. Elegant, nicht wahr? Leider ist es aber doch nicht ganz so simpel, denn unglücklicherweise gibt es noch verschiedene Videoformate, die alles etwas komplizierter machen. Mark Pilgrim vergleicht in seinem Buch HTML5 Up and Running [1] Videoformate mit verschiedenen menschlichen Sprachen. Eine deutsche und eine englische Zeitung transportieren unter Umständen dieselbe Information, verwertbar ist die englische Information aber nur, wenn der Leser der englischen Sprache mächtig ist, sie also interpretieren kann. Genauso kann ein Video nur dann wiedergeben werden, wenn das Videoformat von der Anwendung (dem Videoplayer) interpretiert werden kann. Ärgerlicherweise haben es die Hersteller der Webbrowser bis dato nicht geschafft, sich auf ein gemeinsames Videoformat zu einigen. Safari und Internet Explorer unterstützen nur das Videoformat mp4, Open-Source-Browser wie Firefox, Opera oder Chrome unterstützen die Videoformate Ogg, Vorbis und WebM. Das gleiche Dilemma betrifft auch die Audioformate. Tabelle 2.1 stellt die von den aktuellen Webbrowsern unterstützen Video- und Audioformate für das Betriebssystem Windows® übersichtlich dar.

Codec

Chrome

Firefox

IE

Opera

Safari

Audio: ogg

Ja

Ja

Ja

Audio: mp3

Ja

Ja

Ja

Audio: wav

Ja

Ja

Ja

Ja

Audio: AAC

Ja

Ja

Ja

Video: ogg

Ja

Ja

Ja

Video: mp4

Ja

Ja

Ja

Video: WebM

Ja

Ja

Ja

Tabelle 2.1: Von HTML5 unterstütze Audio und Video Codecs

Ein von allen Browsern unterstütztes Videoformat, das dem Entwickler das Leben vereinfachen würde, sucht man vergeblich. Daher ist es notwendig, jedes Video in mindestens zwei unterschiedlichen Formaten (Tipp: mp4 und WebM) zur Verfügung zu stellen. Das verdoppelt den Speicherbedarf auf der Serverseite und verlangt die Konvertierung ein- und derselben Ressource in verschiedene Videoformate. Eine Anleitung für die Konvertierung von Video- bzw. Audiodateien von Format A nach B findet sich unter [2]. GWT stellt dem Entwickler für die Auswahl des richtigen Videoformats die Methode canPlayType(String mimeType) zur Verfügung. Als Parameter wird der Dateityp in Form des zugehörigen MIME-Typs übergeben. Das Ergebnis des Methodenaufrufs ist entweder „Nein“ (MediaElement.CANNOT_PLAY), „Wahrscheinlich“ (MediaElement.CAN_PLAY_PROBABLY) oder „Vielleicht“ (MediaElement.CAN_PLAY_MAYBE); sprich ein mehr oder weniger klares Ja oder ein klares Nein.

Es ist zu bedenken, dass ein Webbrowser nicht aus dem Dateinamen alleine ableiten kann, um welches Videoformat es sich handelt. Spezifiziert man das Format (bzw. den MIME-Typ) nicht, lädt der Webbrowser das komplette Video vom Server, um dann aus den Metadaten erkennen zu können, ob es wiedergegeben werden kann oder nicht. Um diesen unnützen Datenverkehr zu verhindern, empfiehlt sich eine kleine, feine If Else-Verzweigung, die dem Client nur das Video liefert, das dieser unterstützt (CAN_PLAY_PROBABLY oder CAN_PLAY_MAYBE). Listing 2.2 skizziert eine solche Vorgehensweise, wie sie auch im begleitenden Tutorial-Beispiel angewandt wird.

Video video = Video.createIfSupported();
if (video == null) {
//Legacy Handling
}
else {
videoElement = video.getVideoElement();

videoElement.setPreload(MediaElement.PRELOAD_AUTO);
videoElement.setAutoplay(false);
videoElement.setControls(true);
videoElement.setLang("en");

if (MediaElement.CAN_PLAY_PROBABLY.equals
(videoElement.canPlayType(VideoElement.TYPE_WEBM))) {
videoElement.setSrc("...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang