Die Browser haben seit den ersten Versionen in der frühen 90iger 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 den 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 compiliert und installiert. Mit dem damaligen Mosaic Entwickler Marc Andreesen (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 - das Audio und Videodateien in großer Zahl, Auflösung und Qualität durch das Netz gejagt werden. Tausendfach, Millionen fach. Ein wesentlicher Treiber war es, das mit den jpg, mpeg, mp3 und mp4 Formaten eine effiziente und kostengünstige Codierung und Kompromierung der Multimediadaten entwickelt wurden. Diese Codecs wurden in den frühen 90iger Jahren an einem Institut der Fraunhofer Gesellschaft in Erlangen entwickelt. Wieder ein Beispel dafür das Innovation in Europa entstand, sie aber in den USA kommerzialisiert wurde. Wobei die FhG daraus schon einiges an Lizenzeinnahmen generieren konnte.

Ein weitere Treiber ist es, dass die Integration von Bider, 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 <video>-Tag

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 <audio>-Tag

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 Videbrowser

Ein smarter Audioplayer

• hier in html
• und hier als pdf.

An der generierten Beschreibung könnte man noch feilen und optimieren, aber ich mache das ja zum Vergnügen ...

HTML: Datei-Upload-/Download

<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>

<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>

<a href="/files/beispiel.pdf" download="MeinDokument.pdf">
  PDF herunterladen
</a>

Das war aber noch nicht das Ende der technischen Eskalation ...