<video>-Tag in Firefox 3.5 aus Entwickler/innen-Sicht

Ich hab mich schon lange nicht mehr über ein Browser-Release so gefreut, wie auf Firefox 3.5 – obwohl ich ein bisschen das Gefühl habe, dass es der bisher medial unspektakulärste Firefox-Launch war. Das liegt vermutlich daran, dass die sichtbaren Neuigkeiten minimal sind.

Aber für mich als Programmierer sind die Neuerungen unter der Haube ziemlich spannend. Mozilla hat nämlich einige neue HTML5-Features eingebaut (die aus den Empfehlungen der WHATWG entstanden ist, die sich aus allen Browser-Herstellern außer Microsoft zusammen setzt), die, wenn sie einmal genug verbreitet sind, spannende neue Anwendungen ermöglichen werden. Allem voran ist da der Video-Tag, der demnächst zu einer großen Sache werden könnte.

Es gibt noch weitere Entwickler-Features im Firefox 3.5, über die ich bei Interesse auch schreiben werde.

HTML5

HTML5 ist eine Weiterentwicklung des HTML-Standards, die unabhängig vom W3C, der offiziellen Web-Standard-Institution, durch die WHATWG von den alternativen Browser-Herstellern entwickelt wurde. Mittlerweile ist die Arbeit der WHATWG wieder Teil des W3C und wurde als HTML5 als Standard vorgeschlagen. Obwohl HTML5 noch kein fertiger Standard ist, versuchen die Mozilla, Opera, Google und Apple das zu ändern, indem sie durch die Implementierung der bisherigen HTML5-Entwürfe einen de facto Standard schaffen. (Etwas, das wir vor allem aus dem ersten Browserkrieg (Microsoft vs. Netscape) kennen.)

Microsoft hat eine Unterstützung von HTML5 angekündigt, aber gleichzeitig gewarnt, dass die Spezifikation noch nicht fertig ist. Es ist zu erwarten, dass Microsoft auf den HTML5-Zug aufspringt – aber wohl erst, wenn HTML5 ein offizieller Standard ist.

<video> und <audio>

Eine echt spannende, potentiell sehr weitreichende Neuerung sind der Video- und Audio-Tag – <img>-ähnliche Tags, um eben Videos und Audiodateien in eine Website einzubinden, ohne dafür Flash oder Silverlight zu brauchen. Der Browser implementiert dann selbst einen Player, stellt auf Wunsch die Controls (Play, Pause, etc.) zur Verfügung, etc.

Die Schwierigkeit dabei sind die zu verwendenden Codecs – die Browser-Hersteller haben sich hier noch nicht geeinigt, weder beim Audio-Codec noch beim Video-Codec. Die Standard-Empfehlung ermöglicht zwar die Unterstützung verschiedener Standards, wenn sich die Browser aber nicht auf einen Standard einigen, sehe ich wenige Erfolgschancen für den Video-Tag.
Die Codec-Unterstützung schaut im Moment wie folgt aus: Der Open Source-Codec Theora wird von Mozilla, Chrome und Opera unterstützt. Apple hat für Safari dagegen den mpeg4-Codec lizenziert, Chrome unterstützt neben Theora den H.264-Codec. (Opera hat den Video-Tag für die Version 10.1 angekündigt, Chrome hat den Video-Tag nur in der Test-Version eingebaut.)

Ebenfalls wichtig für die Verbreitung des Video-Tags ist, dass ihn die wichtigen Video-Portale unterstützen. Oder mit anderen Worte: Dass YouTube ihn unterstützt. Ich hätte damit nicht gerechnet (der Video-Player von YouTube wird ja zusätzlich zum Beispiel zum Sammeln von Statistiken und zum Anzeigen von Werbung und Video-Empfehlungen verwendet), aber es schaut gut aus: YouTube hat aber bereits eine HTML5-Demo-Seite erstellt (die aber im Moment nur in Google Chrome funktioniert)!
Wenn YouTube auf den Video-Tag aufspringt, wird er weit genug verbreitet werden, dass auch andere Video-Portale überlegen werden, ihn einzusetzen!

Ach ja: Der Audio-Tag ist wie der Video-Tag, nur eben ohne Video. Alles, was ich oben geschrieben habe, trifft auch auf den Audio-Tag zu (Audio-Codec, Verbreitung).

Beispiel

In diesem Beispiel werden zwei Video-Quellen mit zwei verschiedenen Codecs (zuerst die Theora-Version (.ogg), dann die mpeg4-Version (.mp4)) eingesetzt, als Alternative wird ein kurzer Hinweis angezeigt, dass der Browser veraltet ist. Stattdessen könnte man beispielsweise auch eine Flash-Variante des Videos einbinden.

<video width="500" controls>
<source src="http://videos.mozilla.org/serv/blizzard/35days/html5-fallbacks/zombie.ogg" type="video/ogg"/>
<source src="http://videos.mozilla.org/serv/blizzard/35days/html5-fallbacks/zombie-large.mp4" type="video/mp4"/>
<strong>Sorry, dein Browser ist zu alt für <video> oder du liest diesen Artikel mit einem Feed-Reader! <a href="http://getfirefox.com/">Hier gibts einen modernen Browser.</a></strong>
</video>

Update: Eine weitere Demo-Seite, die einige der Möglichkeiten des Video-Tags zeigt, hat Dailymotion aufgesetzt.

Wozu?

Web-Video war der zweite große Trend der letzten Jahre neben den Social Networks. Bisher mussten Web-Video-Provider zum Anzeigen und Abspielen der Videos immer auf Flash zurückgreifen, das hat aber verschiedene Nachteile:

Einerseits sind die Flash-Video-Player oft einfach schlecht. derStandard.at ist ein gutes Beispiel für einen solchen sagenhaft hässlichen Player, bei dem der Play-Button so klein ist, dass ich ihn manchmal gar nicht treffe.

Andererseits ist es nicht ohne weiteres möglich, den Flash-Player mit JavaScript zu steuern (starten, stoppen), es ist relativ aufwendig, eigene Controls zu entwickeln.

Dann ist da noch die Portierbarkeit, die gerne vergessen wird: Flash gibt es nur dort, wo Adobe einen Flash-Player entwickeln will und darf. Der Linux-Flash-Player wird von Adobe zum Beispiel ziemlich stiefmütterlich behandelt, fürs iPhone gibt es gar keinen, weil Apple das nicht zulässt. Beim Palm Pre wird er kommen, aber halt irgendwann, das Gleiche gilt für Android. Für Windows Mobile gibt es zwar einen Flash-Player, aber nur einen eingeschränkten.
Da die meisten mobilen Browser im Moment auf Webkit basieren (iPhone, Android, Palm Pre) oder Opera sind, die den Video-Tag bereits unterstützen bzw. Unterstützung angekündigt haben, würden die meisten Smartphones bald damit zurecht kommen.

Und ja: Mit den schneller werdenden Mobilnetzen wird Web-Video auch auf Smartphones eine große Sache, also spielt die Portierbarkeit eine Rolle.

Mir ist klar, dass der Video-Tag nicht sofort das Web stürmen wird, vor allem auf Entwickler-Seite. Aber ich hoffe auf Microsoft – das in den letzten Jahren bei den Web-Standards gewaltig aufgeholt hat, und könnte mir vorstellen, dass durch den Internet Explorer 9 und den wachsenden Anteilen der alternativen Browser in wenigen Jahren der Video-Tag von einem Großteil der Browser-Benutzer/innen unterstützt wird.

Falls es ein Interesse an Artikeln zu weiteren Browser-Features gibt, lasst es mich wissen, ich werde gern darüber schreiben.

Firefox vs. Internet Explorer

Seit dem Oktober 2001 kursiert auf der ganzen Welt ein Virus-ähnliches Programm, das den Computer wie ein Scheunentor für Angreifer öffnet. Richtig, die Rede ist vom Internet Explorer 6.
Dieser Browser, der wohl als schlechteste weit verbreitete Software unserer Zeit in die Computergeschichte eingehen wird, ist so unglaublich unsicher, dass das Besuchen verseuchter Websites genügte, um Viren auf dem Computer zu installieren.

Zum Glück wurde ein alternativer Browser, dessen Source Code vollständig offen liegt und einsehbar ist, erfolgreich genug, um Microsoft zur Verbesserung des Internet Explorers zu zwingen. Richtig, die Rede ist vom Mozilla Firefox.

Browser-Statistik www.sebmos.at

Das Internet hat sich seit 2001 weiter entwickelt, so wie Microsoft. Demnächst wird die Version 8 des Internet Explorer veröffentlicht, die Web-Standards endlich vernünftig unterstützt (und unter anderem den ACID2-Test besteht).
Dennoch schließt Microsoft mit dem Programm bestenfalls auf die Konkurrenz auf, die sich ihrerseits längst noch weiter entwickelt hat.

Wie sehr Microsoft unter Druck geraten ist, sieht man an der Browser-Statistik dieses Blogs (siehe Grafik oben). Mozilla Firefox ist hier mit mehr als 50% Marktanteil führend, vor dem Internet Explorer mit 37% und Opera mit 5%.

Mozilla Firefox wurde aus mehreren Gründen zur einzigen erfolgreichen Konkurrenz  – sowohl, weil er das Grundparadigma Usability, Usability, Usability! des Internet Explorer teilt, aber auch, weil er mit einer geschickten Marketing-Strategie beworben wurde.
Vor allem aber sind die Funktionen des Mozilla Firefox um Welten besser als das, was Microsoft im Moment mit dem Internet Explorer 7 anbietet. Diese sind zwar grundsätzlich auch in den anderen Browsern verfügbar, Mozilla hat aber besondere Liebe zum Detail bewiesen und die Features damit besonders gut gemacht.

Adressleiste/Awesome Bar

Firefox Awesomebar

Die “Awesome Bar” ist eine Entwicklung von Mozilla, um die besuchten Seiten und die Bookmarks besser durchsuchbar zu machen. Anstatt in die Adressleiste eine Url einzugeben, kann man Suchbegriffe eingeben, die in den bisher besuchten Seiten gesucht werden.

Dieses Feature ist zwar gewöhnungsbedürftig, aber unglaublich praktisch. Im Screenshot bringe ich ein Beispiel, mit dem mir der Vorteil der Awesome Bar zum ersten Mal richtig bewusst wurde: Ich will manchmal schauen, welche Filme gerade im Fernsehen laufen. Das Fernsehprogramm meiner Wahl (Tele) zeigte lange auf der Startseite (www.tele.at) Produktübersicht (mittlerweile geändert), bevor man auf das TV-Programm klicken und nach einem weiteren Link auf das aktuelle Programm kommt.
Gebe ich in der Awesome Bar dagegen “was läuft” ein, wird die Seite sofort gefunden, da “was läuft” Teil des Titels der Seite ist.

Tipps

  1. Mit der Tastenkombination STRG + L springt man jederzeit in die Adressleiste bzw. Awesome Bar.
  2. Gibt man einen Suchbegriff ein und drückt die Enter-Taste (ohne einen von der Awesome Bar vorgeschlagenen Link auszuwählen), wird der Begriff automatisch mit Google gesucht. Falls Google den Begriff eindeutig zuweisen kann (zB “myspace” –> “www.myspace.com”), wird man direkt auf die Website weitergeleitet.

Suchfeld

Firefox Suchfeld

Das Suchfeld ist die zweite Möglichkeit, mit dem Firefox zu suchen. Es sucht im Gegensatz zur Awesome Bar im Internet, nicht am Computer. Das Suchfeld ist eine simple Erfindung und für den Großteil von Mozillas Umsatz verantwortlich. Während in einigen asiatischen Ländern Yahoo bzw. in Russland Yandex voreingestellt sind, ist im Rest der Welt Google voreingestellt.

Tipp

  1. Mit der Tastenkombination STRG + K springt man jederzeit in das Suchfeld.

Opera & Co

Opera spielt, obwohl der erste kommerzielle Browser-Anbieter, am Desktop-Markt weiterhin eine untergeordnete Rolle. Dafür sind Operas Browser auf Smartphones sehr beliebt, werden allerdings auch hier nach und nach von Open Source-Browsern erdrängt (iPhone: Safari Mobile; Android: Webkit-basierter Browser; WebOS: Webkit-basierter Browser; Symbian: Webkit-basierter Browser befindet sich in Entwicklung; außerdem entwickelt Mozilla gerade unter dem Codenamen “Fennec” den Firefox Mobile).

Vor einem Jahr hab ich unter dem Titel Opera vs. Firefox bereits  einen Artikel dazu geschrieben.

Opera vs. Firefox

Update: Hier befindet sich der aktuellere Beitrag zum neuen Opera 9.5.

Wer in den Medien von Web-Browser liest, liest vermutlich immer nur von Firefox vs. Internet Explorer, in einem Kampf von David gegen Goaliath. Mozilla Firefox ist auch tatsächlich der David im Vergleich zu Microsoft’s Internet Explorer. Nur gibt es neben Firefox auch noch andere Browser, von denen vor allem Opera nennenswert ist. (Safari ist es nicht, denn der ist nur für Mac OS X verfügbar, und in einer sehr, sehr fehlerhaften Version für Windows.)

Dass Firefox 2 dem Internet Explorer 7 um einiges Voraus ist, will ich hier nicht diskutieren. Es steht außer Frage. Ganz einfach. Sowohl als Benutzer (Der IE7 benötigt zum Öffnen eines Tabs mehrere Sekunden. Grauenhaft.) als auch als Entwickler. (Bei Presentify hab ich mit Firefox entwickelt, danach für Opera, IE7 und IE6 optimiert. Opera war kein Problem, da waren nur ein paar Formulierungen im Stylesheet zu ändern, das ist locker in einer halben Stunde gegangen. IE7 benötigte ca. zwei Stunden Arbeit und ein eigenes Stylesheet. IE6 benötigte 6 weitere Stunden Arbeit und ebenfalls ein eigenes Stylesheet.)

Immer wieder, wenn man von Firefox 3 oder Opera 9 hört, wird von Opera-Nutzern gesagt, um wie viel besser und konfigurierbarer Opera wäre. Und von Firefox-Nutzern, um wie viel besser und flexibler der Firefox wäre.

Ich bin ein Firefox-Fan, aber grundsätzlich pragmatisch. Wenn ein besseres Produkt kommt, werde ich es nützen. Also probier ich mich heute wieder mal am Opera.

Erster Eindruck

Der erste Eindruck? Ich muss umkonfigurieren! Das ist das erste, was ich bemerkt habe. Und zwar: Wenn man bei Opera mit STRG + Tab zwishcen den Tabs zerumwechselt, verhält sich Opera wie Windows – es scrollt nach der letzten Verwendung. Auch, wenn das das Standard-Windows-Verhalten ist – es ist bei Tabs ziemlich nervig. Das musste ich umstellen, ging aber für einen Power-User zum Glück leicht.

Surf-Verhalten

Es ist angenehm zum Surfen. Opera legt Wert auf ein “weiches” Surf-Gefühl. Ich kann es nicht besser beschreiben. Man fühlt sich meistens einfach wohl. Die Speed Dial-Funktion ist erstaundlich praktisch. Wirklich. Hab ich nicht erwartet.

Auch das “weiche” scrollen ist echt super. Und ist prompt auch als “Smooth Scrolling” bei mir im Firefox aktiviert. (Wieso ist das nicht Standard?)

Nachteile

Opera hat aber leider auch viele Nachteile.

Das User Interface verhält sich nicht wie Windows. Auch, wenn das manchmal schöner ist – es ist nicht praktisch, weil alle anderen Programme anders funktionieren. Damit hab ich eine Lern-Hürde. Opera kann nichts dafür, dass Windows nicht diese coolen, kleinen Funktionen hat. Aber trotzdem sollte das alles standardmäßig deaktiviert sein.

Etwas konkretes: Wenn man mit STRG + Tabulator zwischen den geöffneten Tabs zerumspringt, öffnet Opera ein Fenster mit den Titeln der aktiven Tabs – auf dem Fenster wird angezeigt, was man gerade ansteuert. Das Browser-Fenster ändert sich erst, wenn man seine Wahl getroffen hat. Das ist ein großer Fehler. Ein riesiger Fehler. Ganz brutales “No-Go”. Einmal mehr ist das zwar das Standard-Verhalten von Windows, aber einmal mehr kann man Tabs nicht mit Programmen vergleichen. Ein Programm hat ein Icon – auf der Basis kann ich relativ leicht unterscheiden, wohin ich gerade wechsle. Aber längst nicht alle Websites haben ein eigenes Icon. Und selbst wenn – es wird sehr klein angezeigt, in 16×16 (größer wird es ja auch nicht geliefert!). Firefox macht es richtig: Es wird gleich der jeweils aktive Tab angezeigt.

Noch etwas: Kein Tastenkürzel für das Suchfeld. Ja, ich kann “g Suchbegriff” in die Adressleiste eingeben, aber wofür ist das Suchfeld dann gut? Ich würde mir wünschen, mit einem Tastenkürzel in das Suchfeld springen zu können. Am besten natürlich mit STRG + K, wie beim Firefox, aber das scheint beim Opera bereits belegt zu sein. Egal, es findet sich schon was. Nur ohne ist es echt nicht praktisch!

Und: Keine Add-Ons. Die größte Stärke von Firefox ist es, Add-Ons zu installieren. Egal, wie viele Funktionen Opera hat – einige der wichtigsten Firefox-Funktionen sind für den Opera ganz einfach nicht verfügbar: MeasureIt, Firebug & YSlow, FireFTP, S3 Firefox Organizer, PDF Download, Resizeable Textarea.

Fazit

Mein Fazit ist klar: Ich bleibe beim Firefox. Opera ist zwar ziemlich cool, aber nicht flexibel genug. Für den Durchschnitts-Surfer ist Opera vielleicht eine gute Alternative – für Web-Entwickler nicht. Und jeder, der das Gegenteil behauptet, hat Firebug noch nicht verwendet! ;)

Firefox Menü-Verwucherungen

Heute auf Golem.de gelesen: “Menü-Entrümpelung im Firefox”

Und glatt fällt mir ein, wie sehr es mich ärgert, dass ich in meinem “Tools”-Menü folgende Menüpunkte finde, die durch Extensions hinzugefügt wurden:

  • Google Gears Settings
  • Nightly Tester Tools
  • PDF Download – Options (sogar mit einem Logo!)
  • Web Developer
  • Firebug

Mir ist nicht klar, wozu das gebraucht wird! Vor allem die Optionen sollten doch eigentlich im Add-Ons-Fenster zu finden sein.

Langsam aber sicher gibt es so viele Extensions, die Menüs in meinen Firefox hineinwurschteln, dass ich mir wünschen würde, Mozilla würde eine Art “Firefox User Interface Guidelines” schreiben, als Empfehlungen.

Wann ist es sinnvoll, einen Menüeintrag zu machen, wie soll er getitelt werden, wo soll er sein? Wann ist es erlaubt, automatisch einen Menü-Button im Hauptmenü zu ergänzen? Welche Design-Richtlinien soll er befolgen? Wann darf ich in die Statusleiste ein Icon einfügen? Wie soll das aussehen? Wie soll es sich verhalten? (Kontextmenü oder doch eine bestimmte Aktion beim Rechtsklick?)

Da ich noch nichts dergleichen gefunden habe, habe ich hier einen Bug in Bugzilla gemacht.

Firefox 3: Offline-Unterstützung

Wer die Entwicklung der nächsten Version des Firefox-Browsers verfolgt, hat vielleicht schon gelesen, dass neben anderen Dingen mit Hochdruck daran gearbeitet wird, dem Firefox die Unterstützung von Offline-Anwendungen zu ermöglichen. Das geht hauptsächlich durch einen lokalen Speicher, den die Seiten belegen können.

Chris Double, ein Vertragsmitarbeiter der Mozilla Corporation aus Neuseeland arbeitet mit den Machern von Zimbra zusammen, um Zimbra als Referenz-Anwendung Offline-fähig zu machen.

Hier ist das beeindruckende Demo zu finden.

Mozilla will diese Funktionen standardisieren, die Chancen dafür stehen recht gut, wenn die Funktionen in Zusammenarbeit mit den anderen relevanten Browser-Herstellern (Apple, Microsoft, Opera) entwickelt werden.

Man stelle sich nun die Möglichkeiten vor, die diese Offline-Funktionen schaffen. Stellt euch ein Gmail vor, wo man die letzten 100 E-Mails auch Offline lesen kann, und E-Mails, die Offline geschrieben werden, automatisch verschickt werden, sobald wieder eine Verbindung besteht.
Oder Google Text & Tabellen, wo alle Dokumente auch Offline zur Verfügung stehen. Oder natürlich auch die Produkte anderer Firmen. Die Möglichkeiten sind schier grenzenlos.

Und wer befürchtet, dass Mozilla damit die Monopolbildung von Google unterstützt, beachte, dass dank der niedrigen Einstiegskosten nicht nur die Chancen für Google steigen, Microsoft im Heim-Office-Bereich zu schaden, sondern auch für andere Firmen, wie Zimbra oder Zoho.