Die Browser haben seit den ersten Versionen in der frühen 90er Jahren eine unglaubliche Entwicklung vollzogen. Zum Teil hat das mit den schon in Vergessenheit geratenen "Browserkriegen" zu tun.
Von 1995 bis 1998 tobte ein Verdrängungswettbewerb zwischen Microsoft und Netscape um die Vorherrschaft ihrer Webbrowser, in dem sich Microsoft am Ende mit dem Internet Explorer gegen den Netscape Navigator durchsetzen konnte. In der Zeit sind unheimlich viel Features für die Browser entwickelt worden — CSS und Javascript zum Beispiel. Den Netscape Vorgänger Mosaic hatte ich in den ersten Versionen aus dem Quellcode kompiliert und installiert. Mit dem damaligen Mosaic Entwickler Marc Andreessen (später Netscape CEO) habe ich E-Mails zu Bugs an Mosaic ausgetauscht. Die Entwicklung in den Jahren ab 2004, in denen Mozilla Firefox, Safari, Google Chrome und andere alternative Browser dem Internet Explorer wieder Marktanteile abnehmen konnten, wird zuweilen als "zweiter Browserkrieg" bezeichnet.
Damals unvorstellbar — und Gegenstand von angewandter Forschung — dass Audio- und Videodateien in großer Zahl, Auflösung und Qualität durch das Netz gejagt werden. Tausendfach, Millionenfach. Ein wesentlicher Treiber war es, dass mit den jpg, mpeg, mp3 und mp4 Formaten eine effiziente und kostengünstige Codierung und Komprimierung der Multimediadaten entwickelt wurden. Diese Codecs wurden in den frühen 90er Jahren an einem Institut der Fraunhofer Gesellschaft in Erlangen entwickelt. Wieder ein Beispiel dafür dass Innovation in Europa entstand, sie aber in den USA kommerzialisiert wurde. Wobei die FhG daraus schon einiges an Lizenzeinnahmen generieren konnte.
Ein weiterer Treiber ist es, dass die Integration von Bild-, Audio- und Videodaten in HTML 5 extrem simpel ist. Speziell für die Audio- und Videowiedergabe — sprich Start, Stop, Pause etc. Funktionen — bringen die Browser schon mit.
HTML 5 -Tag: <video>
Das <video>-Tag ermöglicht die Einbindung von Video-Dateien direkt in eine HTML-Seite. Es kann optional Steuerelemente (Play, Pause etc.) anzeigen und mehrere Formate zur Kompatibilität bereitstellen.
Beispiel:
<video width="640" height="360" controls>
<source src="huch.mp4" type="video/mp4">
<source src="huch.webm" type="video/webm">
Ihr Browser unterstützt das Video-Tag nicht.
</video>Wichtige Attribute:
- controls: Zeigt die Standard-Steuerelemente an.
- autoplay: Startet die Wiedergabe automatisch (oft nur ohne Ton erlaubt).
- loop: Spielt das Video in einer Endlosschleife ab.
- muted: Startet das Video ohne Ton.
- poster: Bild, das vor dem Start angezeigt wird.
HTML 5 -Tag: <audio>
Mit dem <audio>-Tag kann man Audiodateien direkt im Browser wiedergeben. Auch hier lassen sich mehrere Quellen angeben, um Browserkompatibilität sicherzustellen.
Beispiel:
<audio style="width:50%" controls>
<source src="beispiel.mp3" type="audio/mpeg">
<source src="beispiel.ogg" type="audio/ogg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>Wichtige Attribute:
- controls: Blendet Steuerelemente ein.
- autoplay: Startet die Wiedergabe automatisch.
- loop: Wiederholt das Audio endlos.
- muted: Audio startet stumm.
Ein einfacher Videobrowser
In der einfachsten Version habe ich im (etwas mittlerweile überarbeiteten) jpeg-Browser statt dem <img>-Tag das <video>-Tag verwendet — und voilà ... fertig ist der Videobrowser. Im Laufe der Zeit habe ich alle Videos (bis 1993) als mp4 auf diesen Server geladen.
Ein smarter Audioplayer
Bei dem Audioplayer war dann doch etwas mehr Gestaltungsaufwand notwendig ... auch hier hat ChatGPT die Entwicklung beschleunigt. Alle Platten und CDs die wir hatten sind jetzt als mp3 über den Mediabrowser abspielbar.
Hier habe ich zum ersten Mal ein vollständig reflexives Design umgesetzt. Es passt sich immer an alle Geräte, Display- und Fenstergrößen an. Eine komplette Beschreibung des Audioplayer Codes (auch mit ChatGPT generiert) gibt es
An der generierten Beschreibung könnte man noch feilen und optimieren, aber ich mache das ja zum Vergnügen ...
HTML: Datei-Upload
Bei dem MediaBrowser wurden auch Up- und Downloadfeatures eingebaut — basierend auf reinem HTML. HTML stellt ein Formular mit <input type="file"> bereit, um eine Datei auszuwählen und hochzuladen. Der MediaBrowser nutzt das bei den Photos.
Beispiel:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Datei auswählen:</label>
<input type="file" id="file" name="file">
<button type="submit">Hochladen</button>
</form>Hinweise
- enctype="multipart/form-data" ist erforderlich.
- multiple erlaubt Mehrfachauswahl.
- accept=".jpg,.png" beschränkt die Auswahl auf bestimmte Dateitypen.
HTML ermöglicht auch den Zugriff auf Kamera, Mikrofon oder Scanner — falls vorhanden — mithilfe des accept-Attributs in Kombination mit capture. Dadurch kann z.Bsp. ein Foto aufgenommen und direkt hochgeladen werden: <input type="file" accept="image/*" capture="camera"> does the magic.
Beispiel:
<form action="/upload" method="post" accept="image/*" enctype="multipart/form-data">
<input type="file" capture="camera" id="file" name="file">
<button type="submit">Datei auswählen bzw. Foto aufnehmen</button>
</form>HTML: Datei-Download
HTML ermöglicht Datei-Downloads über das download-Attribut im <a>-Tag. Der MediaBrowser nutzt das bei den Audiodateien.
Beispiel:
<a href="/files/beispiel.pdf" download="MeinDokument.pdf">
PDF herunterladen
</a>Was bewirkt das?
- Der Browser lädt die Datei herunter statt sie zu öffnen.
- Der vorgeschlagene Dateiname ist MeinDokument.pdf.
Das wird noch nicht das Ende der technischen Eskalation gewesen sein ...