Skip to content

Medienformate Dokumentation

Jump to bottom
Aysenur edited this page Dec 1, 2013 · 139 revisions

Autoren

  • Kai Dippel
  • Aysenur Cavusoglu
  • Christian Grevenstein

Inhalt

  1. Einleitung
  2. Bilder
  3. Audio
  4. Videos
  5. SVG-Grafiken
  6. Quellen

Vorwort

Medien gibt es schon seit Ewigkeiten. Ob es nun Malerei auf einer Steinwand, ein Gedicht auf einem Blatt Papier oder, wie heute, Videos im Internet sind, es geht immer darum, Informationen zu vermitteln. Im folgenden möchten wir ihnen die Modernen Medienformate und vor allem ihre Einbettung und Funktion näher bringen.

1. Einleitung

Generell muss jedes Medienformat für das Abspielen auf einer Webseite im Internet vorbereitet werden. Diese Dokumentation soll einen Überblick über die Einbindung der verschiedenen Medienformate geben , die Video, Bild, Musik enthalten.

2. Bilder

Formate

GIF

Das Graphics Interchange Format bietet verlustfreie Kompression, wodurch die Dateigröße verkleinert werden kann, die Qualität aber erhalten bleibt. Außerdem werden transparente Teilbereiche von GIF unterstützt. Des weiteren können mehrere Einzelbilder im GIF-Format in einer Datei gespeichert werden und hintereinander abgespielt werden um eine Animation zu erzeugen. Leider unterstützt GIF nur maximal 8 Bit Farbtiefe, das heißt es können nur 256 einzelne Farben verarbeitet werden, was es für Fotos oder andere komplexe Bilder absolut ungeeignet macht. Deshalb wird es heutzutage eigentlich nur noch für Animationen benutzt, wenn alternative Animationsmöglichkeiten wie Flash oder HTML 5 aus verschiedenen Gründen ungeeignet sind.

JPEG

Ist eine von der Joint Photographic Experts Group entwickelte Norm zur Bildkompression. Die heute gebräuchlichen Dateiformate .jpg und .jpeg sind eigentlich Dateien im JPEG File Interchange Format (JFIF), welches 1991 von Eric Hamilton entwickelt wurde, weil die JPEG Norm nur den Komprimierungsvorgang festlegt, nicht aber wie die entstandenen Bilddaten abgelegt werden müssen. Das JFIF wird verwendet, weil es 24 Bit Farbtiefe, also maximal 16,7 Millionen Farben erlaubt und die Dateigröße durch die starke Komprimierung verhältnismäßig gering ist. Es bringt allerdings auch einige Nachteile mit sich, da es ein verlustbehaftetes Format ist, welches die sehr gute Kompression durch teilweise starke Qualitätsverluste erkauft. Des weiteren ist JFIF nicht in der Lage transparente Teilbereiche darzustellen und auch Animationen sind nicht möglich. Für die meisten Anwendungsgebiete im Fotobereich stellt es jedoch aktuell den besten Kompromiss zwischen Qualität und Dateigröße dar, weshalb es in diesem Anwendungsbereich auch mit Abstand das am weitesten verbreitete Dateiformat ist.

PNG

Das Portable Network Graphics Format oder kurz PNG ist das modernste der 3 großen Webformate, denn es kombiniert im Prinzip die Vorteile von GIF und JPEG, verzichtet jedoch auf die Möglichkeit zur Animation, welche nur GIF als Bildformat direkt anbietet. Im Gegenzug bietet es allerdings ebenfalls, die Möglichkeit zu transparenten Bereichen im Bild und dieselbe verlustfreie Kompression wie GIF, jedoch ist diese im für GIF wichtigen Bereich der geringen Farbtiefe effizienter und somit hat es GIF fast vollständig verdrängt, wenn keine Animationen gefragt sind. Der größte Vorteil gegenüber GIF ist jedoch, dass es ganze 24 Bit Farbtiefe, also 16,7 Millionen Farben in einer Datei erlaubt, im Gegensatz zu den 8 Bit Farbtiefe und 256 Farben von GIF. Gegenüber JPEG kann es sich vor allem durch seine Möglichkeit zur Transparenz und die verlustfreie Kompression abheben, jedoch wird die verlustfreie Kompression durch deutlich geringere Kompressionsraten gegenüber JPEG erkauft, was in bestimmten Anwendungsszenarien ausschlaggebend sein kann. Verwendet wird PNG also hauptsächlich für Bilder mit geringer Farbtiefe, wie beispielsweise Icons oder Grafiken, sowie für Bilder welche transparente Bereiche benötigen.

Kompatibilität

Alle modernen Browser unterstützen alle wichtigen Bildformate, weshalb eine Mehrfacheinbindung desselben Inhalts in verschiedenen Dateiformaten, wie bei Audio oder Video Dateien nicht benötigt wird. Wobei allerdings dazu gesagt werden muss, dass alte Internet Explorer Versionen (bis einschließlich Version 6) die von PNG ermöglichte Transparenz über den Alphakanal nicht unterstützen, dies wurde von Microsoft erst am 19. Oktober 2006 mit dem Internet Explorer 7 behoben, also wer seit mehr als 7 Jahren kein Browserupdate mehr durchgeführt hat und den Internet Explorer verwendet hat leider Pech gehabt, was die Transparenz von PNG Dateien angeht und muss sich, da die Unterstützung für den Internet Explorer 6 selbst von großen Anbietern wie Google oder Youtube schon vor einigen Jahren eingestellt wurde, leider über ein Browserupdate Gedanken machen, wenn er transparente PNG Bilder sehen möchte, da es zwar möglich ist über einen sogenannten „CSS Hack“ den Internet Explorer 6 PNG transparenzfähig zu machen, da man diesen aber erstens für jedes einzelne PNG Bild auf einer Website einzeln durchführen muss, zweitens diese Lösung nicht standardkonform ist und somit im CSS Validator durchfallen wird und drittens der Marktanteil des IE6 und älter dermaßen gering ist, stehen Aufwand und Ertrag in keinem Verhältnis, weshalb es heutzutage kein Kompatibilitätsproblem zwischen den wichtigsten Formaten mit den jeweiligen Browsern mehr gibt, beziehungsweise dieses so klein ist, dass die Lösung vom User durch ein Update seines Browsers zu erbringen ist und man sich als Webentwickler nicht damit aufhalten sollte.

Einbettung

Die kürzestmögliche Implementierung eines Bildes in eine HTML Seite ist folgende:

<img src="test.gif" alt="test">

Die absolut notwendigen Dinge sind also das img-Tag, sowie die Attribute src und alt. Alle speziell vom img-Tag in HTML 5 unterstützten Attribute werden in folgender Tabelle übersichtlich beschrieben:

Attribut Beschreibung
src Legt die Quelle eines Bildes fest
alt Legt einen alternativen Text für das Bild fest
height Legt die Höhe eines Bildes in Pixeln fest
width Legt die Breite eines Bildes in Pixeln fest
crossorigin Erlaubt Bildern von Drittanbietern cross-origin Zugriff um mit canvas benutzt zu werden
ismap Legt ein Bild als Serverseitige image-map fest
usemap Legt ein Bild als Clientseitige image-map fest

Außerdem werden auch noch die globalen, sowie die Event Attribute von HTML unterstützt.

Fazit

Es gibt kein bestes Format, die vorhandenen Formate sind alle für mindestens eine Anwendung das beste und für mindestens eine andere Anwendung vollkommen ungeeignet. Sie haben also alle ihre Daseinsberechtigung, wobei vor allem GIF zunächst durch Flash, dann PNG und mittlerweile vor allem HTML 5 seinen Zenit zu überschreiten scheint. Anbei eine kleine Übersicht, welche die Features der verschiedenen Formate vergleicht:

</tr>
Feature GIF JPEG PNG
maximale Farbtiefe 8 Bit 24 Bit 24 Bit
Kompressionsart verlustfrei verlustbehaftet verlustfrei
Transparenz X X
Animationen X

3. Audio

Allgemein

Audiodaten sind Daten, die Töne in digitaler Form gespeichert haben, damit diese weitergegeben werden können.Hierbei spielt die Größe, sowie die Qualität der gespeicherten Dateien, eine wichtige Rolle. Um die Datei zu sichern und so viel wie möglich platz zu sparen, werden verschiedene Algorithmen zur Datenreduzierung, für die spezielle Audioformate zum Einsatz kommen, verwendet. Man unterscheidet in zwei Obergruppen von Audioformaten: die verlustfreien und die verlustbehafteten Audioformate.

Bei der Audiodatenkompression kommt es entweder zu Datenreduktionen („verlustbehafteter Algorithmus“) oder zu einer Datenkompressionen („verlustfreier“ Algorithmus).

####Verlustbehaftete Kompression

Bei verlustbehafteten Komprimierungsmethoden gehen Informationen endgültig verloren. Dieses Verfahren komprimiert sehr stark, kann aber nur für Datentypen eingesetzt werden, bei denen Verluste wenig auffallen oder die sich verlustfrei nur schlecht komprimieren lassen. Die verlorene Datenmenge, hängt meistens vom Grad der einstellbaren Komprimierung ab. Wichtig ist zu wissen, dass viele verlustreiche Komprimierungsmethoden bei erneuter Komprimierung weitere Inhalte verlieren.

####Verlustfreie Kompression

Verlustfreie Kompression ist eine Kompressionsmethode, bei der die Originaldatei erhalten wird. Diese Kompressionsmethode verändert keinerlei Informationen. Entsprechend der Dekompression sind die Daten völlig wiederhergestellt.

Formate

Für das Audio-Format haben sich drei verschiedene Formate durchgesetzt.

  • das lizenzfreie Format Ogg Vorbis
  • das lizenzrechtlich geschützte Format WAV
  • und das MP3 Format

Ogg Vorbis

Dieses Verfahren wurde als preisgünstige MP3-Alternative entwickelt. Im Gegensatz zu MP3 und WAV müssen Hersteller für den Einbau von Ogg Vorbis in Geräte oder Programme keine Lizenzgebühren zahlen. Bei Ogg handelt es sich um ein Containerformat - das heißt, dass die verschiedensten Inhalte (Audio, Video, Steuerbefehle) in einer Datei gespeichert werden können.

MP3 (Moving Pictures Experts Group Layer 3)

Das MP3-Format ist ein Dateiformat zur verlustbehafteten Komprimierung und Ablage von Musikdateien. Dieses Format benötigt etwas ein Zehntel des Speicherplatzes einer herkömmlichen WAV-Sounddatei. Die Kompression wendet ein Verfahren an, das sich kaum auf die Qualität der Musik auswirkt, aber die Dateigröße extrem reduziert.

WAV (Windows Audio Format)

Das WMA-Format ist ein Teil der Windows Media-Plattforms. Es weist eine sehr hohe Kompressionsrate auf, dennoch ist die Soundqualität relativ gut. WMA- Dateien sind besonders für das „Streamen“ geeignet. Streaming bedeutet, dass mit dem Eintreffen der ersten Daten, die Ausgabe von Sound auf dem Zielrechner begonnen wird. Der Sound wird „live“ übertragen. Die weiteren Daten werden während des Abspielens nach und nach geliefert. WMA´s sind kopiergeschützt und somit lizenzpflichtig.

Kompatibilität

Übersicht zur Abspielbarkeit verschiedener Audioformate mit dem HTML5 in verschiedenen Webbrowsern:

</tr>
<tr>
    <td>MP3</td> 
    <td>✔</td>
    <td>X</td> 
    <td>X</td> 
    <td>✔</td>
    <td>✔</td>
</tr>
<tr>
    <td>WAV</td>
     <td>✔</td>
    <td>✔</td> 
    <td>✔</td> 
    <td>X</td>
    <td>✔</td>
</tr>
IE Firefox Opera Chrome Safari
OGG Vorbis X ✔ ✔ ✔ X

Leider unterstützen nicht alle Browser die neuen Tags. Wenn man versuchen will so viele Browser wie möglich zu unterstützen, so muss man die Dateien jeweils in den verschiedenen Formaten vorliegen haben, was einen erhöhten Speicherplatzbedarf bedeutet, da es eben mehrere Dateien zu verwalten gilt. Es ist wichtig, dass man sich nicht nur auf die neue Technologie verlässt, sondern einen Fallback definiert.

Einbettung

Audio-Dateien werden ebenso wie Video-Dateien eingebunden. Der passende Tag heißt jedoch <audio>.

Zudem kann man wie beim Video-Tag natürlich mehrere Formate der Audiodatei bereitstellen. Jeder Browser holt sich automatisch das passende Format und überspringt die anderen. Da es kein übliches Format gibt, muss man die Audiodatein mehrfach kodieren, um eine möglichst große Abdeckung für das Publikum zu erzielen.

Die wichtigsten Attribute von <audio>

Wie beim video unterstützt auch <audio> Tag Attribute wie <controls>,<autoplay>,<loop> und <preload>. Somit ist der Syntax für <audio> im Prinzip die Gleiche wie beim <video> Tag.

MIME TYPE's oder Content-Type

Auch hier verwendet man je nach Format unterschiedliche Types. Diese werden in der folgenden Schreibweise ausformuliert:

  • type=<audio/wav>
  • type=<audio/mpeg>
  • type=<audio/ogg>

Beispiel-Programmcode für einen Audio-Clip in mehreren Dateiformaten:

<audio controls autoplay>
  <source src="beispieltrack.ogg" type="audio/ogg">
  <source src="beispieltrack.mp3" type="audio/mp3"> 
</audio>

4. Videos

Allgemein

Bisher war es üblich Video- und Audiodateien mit Flash einzubinden. Daraus entstand die Notwenigkeit des Users einen Flashplayer im Browser als Add-On an Bord zu haben. Hinzu kommt, dass Suchmaschinen z.b. grafisch eingebundenen Text nicht auslesen, Stichwort: Flash. Mit HTML5 kommt nun das und -Element hinzu und macht den Flashplayer für Video-und Audioeinbindung auf Webseiten überflüssig.

Generell muss jedes Video für das Abspielen auf einer Webseite im Internet vorbereitet werden: Speicherformat, Codecs, Auflösung und Bitrate sind die vier Parameter für Video im Internet. Die Frage nach dem besten Video-Format, dem besten Codec oder der optimalen Bitrate erübrigt sich im Internet: Hier wird das genommen, was die Browser und die Internetverbindung hergeben.

Speicherformat

Ähnlich wie bei Bildern, wo man sich zwischen JPEG, GIF und BMP entscheiden muss, muss auch für das Video ein Speicherformat festgelegt werden. Videos bestehen i.d.R. aus einem Video-Track, einem oder mehreren Audio-Tracks, Untertiteln und evt. aus Metadaten wie dem Titel des Videos. Diese Tracks sind miteinander verbunden, damit Audio-Track und Untertitel immer synchron zu den gezeigten Bildern bleiben. MP4, M4V, MOV, AVI und FLASH sind Containerformate für Videos – ähnlich wie TIF ein Container für Pixeldaten und PDF ein Container für Text und Bilder sind.

Mit der Dateiendung der Videodatei können wir Videos am einfachsten identifizieren – .avi, .mov, .mp4 oder .flv. Es gibt .mp4 (MPEG 4) und .m4v (von Apple entwickeltes Videoformat, wie mp4, aber mit optionalem DRM-Kopierschutz), .flv (Flash Video), .ogv (OGG) und Google kommt mit webM. Flash-Video (.flv) ist zwar noch immer der vorherrschende Standard, für den nahezu alle Besucher das Flash-Plugin installiert haben, aber auf dem iPhone und dem iPad wird Flash-Video nicht abgespielt.

Heute können die modernen Browser bestimmte Videoformate von Haus aus abspielen. Ältere Browser wie Internet Explorer vor Version 9 brauchen ein Plugin, z.B. das Flash-Plugin oder ein Quicktime-Plugin. Eines Tages sind die Server sicher schnell genug, um Videos on the fly von einem Format in ein anderen zu konvertieren, aber bis dahin müssen Videos »auf Vorrat« in die gängigen Formate konvertiert werden.

FLV Flash Video von Adobe Systems | Flash Video (.flv) ist ein für Webstreaming optimiertes Format. Allerdings muss im Webverzeichnis des Servers ein Shockwave-Player liegen, denn flv kann nicht direkt abgespielt werden, sondern braucht einen Shockwave-Player.

MP4 (MPEG-4-Dateiformat) | Standard-Containerformat für MPEG-4-ASP-/-AVC-Videostreams; basiert auf dem Quicktime-Containerformat.

OGV | Firefox setzt auf OGV als Video-Container.

webM | Google will webM als Standard für Video im Internet etablieren.

AVI (Audio Video Interleave) | das wahrscheinlich überflüssigste Containerformat, das wir jetzt endgültig begraben können.

Codecs

Videos können nicht unkomprimiert über das Internet abgespielt werden - dafür sind die Datenmengen eines Videos zu groß (selbst auf DVDs und BlueRays sind Videos immer komprimiert). Das Container-Format ist nur die Verpackung für das Video. Der Video-Codec ist ein Algorithmus, nach dem ein Videostream encodiert und beim Betrachter wieder decodiert wird.

Codecs minimieren die Informationsmenge eines Videos, z.B. indem sie nicht jedes Einbild speichern, sondern nur die Unterschiede zwischen den einzelnen Bildern oder Frames. Bei den meisten Videos ist der Unterschied zwischen zwei aufeinander folgenden Bildern ausgesprochen gering, so dass beim Speichern der reinen Unterschiede eine hohe Kompressionsrate entsteht, die wiederum zu kleinen Dateigrößen führt.

Video-Codecs sind i.d.R. verlustbehaftet – ähnlich wie JPEG beim Bild. Moderne Video-Codecs sind z.B. MPEG-4 ASP, H.264, VC-I, Theora und Dirac.

H.264 | H264 ist ein Standard zur Videokompression und wurde von der Internationalen Fernmeldeunion (ITU) und MPEG-Visual entwickelt. Lizenzen werden von der MPEG Licensing Association vergeben und die Lizenzgebühren an die Patentinhaber verteilt. Patentinhaber sind u. A. Apple und Google (durch den kürzlich durchgeführten Kauf von Motorola). Für Webseitenbetreiber, die Videos kostenlos bereitstellen, ist H264 lizenzfrei. Von Kritikern wird bemängelt, dass der Standard nicht frei ist und somit nicht, fürs grundsätzlich freie Web geeignet sei. H264 hat derzeit mit 80 % den größten Verbreitungsgrad im Internet.

Theora | Ogg Theora ist ein freier und Quelloffener Codec der Xiph.Org Foundation. Er wurde mit dem Ziel entwickelt eine Patentfreie Alternative zu anderen verlustbehafteten Videokompressionen zu bieten. Während die Xiph.Org Foundation und andre Befürworter behaupten, dass der Codec bei Datenrate und Quallität mit andren Video-Codecs mithalten kann, widersprachen u. A. Google und Apple. Kritiker befürchten zudem, dass es Inhaber von Patenten geben kann, welche der Codec verletzt.

VP8 | Der WebM-Standard besteht aus dem Video-Codec VP8, der von On2 Technologies entwickelt wurde, und dem Audio-Codec Vorbis in einem auf einer Untermenge von Matroska basierenden Containerformat. VP8 ist frei und steht wie Ogg unter der BSD-Lizenz zur Verfügung. Initiiert wurde das Projekt von Google, nach den langen Streitigkeit rund um H264 und Ogg. Wie bei Ogg befürchten auch hier Kritiker, dass es Patentansprüche gegen WebM geben kann.

Unterschiedliche Video-Formate unterstützen unterschiedliche Codecs:

  • Video im Format mp4 wird mit dem H.264-Codec komprimiert
  • Flash-Video wird ebenfalls mit H.264 komprimiert
  • OGV-Video wird mit Theora OGG komprimiert

Damit das komplizierte Geflecht aus Videoformat und Video-Codec schön undurchschaubar bleibt, haben Codecs manchmal auch denselben Namen wie Containerformate.

Auflösung und Bitrate

Auflösung des Videos | Zusätzlich müssen hochauflösende Videos - z.B. ein Full HD-Format mit 1920 x 1020 Pixeln – verkleinert werden. Auf der einen Seite wäre Full HD für die meisten Monitore zu groß und natürlich spart die Verkleinerung jede Menge Bandbreite. Immerhin strebt das Video Web der HD-Auflösung (1280 x 720 Pixel) entgegen.

Datenrate des Videos | Bei der Vorbereitung des Videos für das Internet wird eine Datenrate eingestellt – die erzielbare Datenrate richtet sich nach der Übertragungsleitung vom Server zum Betrachter des Videos. Für eine normale DSL-Leitung können wir z.B. eine effektive Datenrate von 1 bis 5 MBit/s annehmen, für HD-Video sollte die Datenrate 2 bis 5 MBit/s betragen.

Video-DVDs haben eine feste Auflösung und eine hohe Datenrate – klar, sie sind für den TV-Monitor gedacht und dessen Auflösung ist nun mal festgelegt. Auf der anderen Seite kommt das Videomaterial aber in immer höherer Auflösung – Camcorder und Spiegelreflexkamera liefert bereits Full HD-Video in einer Auflösung von 1920 x 1080 Pixeln. Das ist eine viel zu große Datenmenge und viel zu groß für die Webseite.

Die Monitore, auf denen wir Videos im Internet ansehen, haben unterschiedliche Auflösungen. Aber selbst Smartphones kommen heute mit HD-Auflösung. Kleinere Auflösungen von HD (1280 x 780) sind definitiv die Ausnahme. Eine Auflösung von 1280 x 720 Pixeln (das ist HD-Video) bringt zugleich eine große Ersparnis für die Bandbreite des Videos und brächte bereits die optimale Qualität für heute. Ob ein Video in dieser Auflösung ruckelfrei im Internet ohne große Verzögerung abgespielt werden kann, ist allerdings eine offene Frage, die stark vom System des Betrachters abhängt und gleichzeitig von der Art des Bildmaterials. Darum sehen wir meistens noch geringere Auflösungen im Internet. Vielfach werden die Filme auf eine deutlich geringere Auflösung heruntergerechnet und dann wieder in größerer Auflösung abgespielt.

Wie groß der Film in Hinsicht auf die Dateigröße ist, ist im Grunde genommen uninteressant, denn das Video muss ja nicht erst komplett zum Betrachter geliefert werden. Video wird in kleinen Häppchen zum Besucher transportiert und kann bereits anlaufen, während es noch übertragen wird. Wichtig ist die Datenrate oder Bitrate. Im Allgemeinen gilt: Je höher die Datenrate, desto besser ist auch die Qualität, desto größer wird auch die Datei. Dabei legt man eine Datenrate fest, die auf das Equipement der potentiellen Betrachter ausgerichtet ist.

Beste Video-Qualität im Internet? | Das schaffen wir mit Videos im Internet (noch) nicht. Für Internet-Wählverbindungen ist die Datenrate begrenzt. So 2-5 MBit/s können wir dem Video heute gönnen, wenn wir davon ausgehen, dass heute fast alle eine schnelle DSL-Anbindung zur Verfügung haben. Einige Codecs erlauben eine Datenrate, die in einem Bereich von oben nach unten variieren darf (z.B. H.264). Wie gut das Video im Internet aussieht, hängt jetzt davon ab, wie gut die Bandbreite zum Besucher ist und wie schnell die Videobilder sind.

Mobile Verbindungen
</tr>

</tr>
<tr>
    <td>2,5G</td> 
    <td>GPRS</td>
    <td>115 kBit/s</td>
</tr>
<tr>
    <td>2,75G</td>
    <td>EDGE</td>
    <td>236 kBit/s</td>
</tr>
<tr>
    <td>3G</td>
    <td>UMTS</td>
    <td>384 kBit/s</td>
</tr>
<tr>
    <td>3,5G</td>
    <td>HSPA</td>
    <td>14,4 mBit/s</td>
</tr>
<tr>
    <td>3,9G</td>
    <td>LTE</td>
    <td>150 mBit/s</td>
</tr>
Generation Technik Bandbreite
2G GSM 9,6 kBit/s

In der Tabelle sieht man, dass nur die neuesten Mobilfunkstandards HSPA und LTE eine Übertragungsgeschwindigkeit bieten, die die Übertragung eines Videos in HD-Auflösung bewerkstelligen können.

Diese Standards sind aber noch lange nicht überall verfügbar, daher muss man bei Videos, die man auch für mobile Endgeräte verfügbar machen möchte, darauf achten und auch Auflösungen anbieten, die mit langsameren Übertragungsgeschwindigkeiten ohne langes Warten abspielbar sind.

Browserunterstützung

Zwar ist es durch HTML5 möglich, Videos ohne zusätzlichen Browser-Plugin abspielen zu können, jedoch gibt es derzeit, wegen der beschriebenen Interessenkonflikten, noch keinen einheitlichen Kompromiss bezüglich der Video-Codecs, die verwendet werden. Von Browser zu Browser unterscheidet sich, welche Codec bevorzugt genutzt wird und welche nicht. Kein Codec wird von allen Browsern unterstützt. Das <video>-Tag ist momentan mit dem IE9, Firefox, Opera, Chrome und Safari kompatibel.

Folgend sind zum einen die Browserkompatibilitäten von Desktop-Browser und zum anderen von Mobile-Browser im Hinblick auf die verschiedenen Video-Formate abgebildet.

Desktop Browser

</tr>

</tr>
<tr>
    <td>WebM</td> 
    <td>X</td>
    <td>✔</td> 
    <td>✔</td> 
    <td>X</td>
    <td>✔</td>
</tr>
<tr>
    <td>OGG</td>
     <td>X</td>
    <td>✔</td> 
    <td>✔</td> 
    <td>X</td>
    <td>✔</td>
</tr>
Internet Explorer Firefox Chrome Safari Opera
h264 ✔ X ✔ ✔ X

Mobile Browser

</tr>

</tr>
<tr>
    <td>WebM</td> 
    <td>X</td>
    <td>✔</td> 
    <td>✔</td> 
    <td>X</td>
</tr>
<tr>
    <td>OGG</td>
     <td>X</td>
    <td>✔</td> 
    <td>✔</td> 
    <td>X</td>
</tr>
Internet Explorer Firefox Chrome Safari
h264 ✔ ✔ ✔ ✔

Fazit

Bringen wir es auf den Punkt: Welches Video-Format ist denn nun für das Internet geeignet? Die modernen Browser bringen kein Flash-Plugin mehr mit, dafür spielen sie Video ohne Plugin in bestimmten Formaten ab. Die alten Versionen von Internet Explorer erkennen das HTML5-Video-Tag nicht, aber wir können davon ausgehen, dass die meisten IE-Benutzer ein Flash-Plugin installiert haben.

Um nun tatsächlich allen Besuchern eine sichere Kombination anzubieten, gibt es nur eine Lösung: Nimm Drei – ein MP4-Video mit dem H.264-Codec für Safari und Internet Explorer 9, OGV-Video mit dem Theora OGG-Codec für Firefox, Chrome und Opera und Flash-Video für die älteren Versionen von Internet Explorer. Dafür dürfen im HTML5-Video-Tag mehrere source-Tags stehen: Dann kann sich der Browser das Format aussuchen, mit dem er das Video ohne Plugin abspielen kann. Für IE6, IE7 und IE8 muss dann neben dem Video-Tag noch ein Object-Tag mit dem Flash-Video bereitgestellt werden. Wer also eine sichere Kombination für alle Browser sucht, muss das Video in drei Versionen vorbereiten und verbraucht den dreifachen Speicher.

Exkurs: Warum wird Flash abgelöst

HTML5

Vorteile
  • <video> und <audio>, erlauben Video- als auch Audiodateien direkt in HTML-Dokumente einzubetten, ohne auf fremde Browser-Plugins wie den Adobe Flash Player zurückgreifen zu müssen
  • Dabei kommen ausschließlich Technologien zum Einsatz, die der Browser selbst mitbringt und die bereits für jede Webseite benötigt werden: HTML, CSS und JavaScript
  • Per CSS-Definitionen kann das Erscheinungsbild des Videos angepasst werden
  • Weiter sind per CSS und SVG sogar Videofilter (Farbfilter, Unschärfe etc.) möglich
  • Für die Steuerung des Videos wurde eine neue JavaScript API geschaffen, welche es erlaubt Listener für Events des Videos zu registrieren (Video fertig geladen, Video-Wiedergabe beendet, etc.) und auch Funktionen mitbringt um die Videowiedergabe zu steuern (Start, Stop, Lautstärke, etc.)
  • Keine Plugins mehr notwendig für Multimedia
  • Offener Standard wird über W3C und WHATWG weiter entwickelt.
  • Integration semantischer Standards
  • In meisten Browsern bereits (wenn auch unvollständig) implementiert
  • Suchmaschinenfreundlich über Metadaten – auch bald für semantische Suche
  • In Zukunft universal auf allen Endgeräten und mit Inhalt in allen Weltsprachen verwendbar
Nachteile
  • Nicht alle HTML5-Funktionalitäten in allen Browsern verfügbar
  • Noch keine fertige Empfehlung des W3C - geplant für 2014 bzw. 2022
  • Anhaltende Cross-Browser-Problematik auch mit CSS3
  • Erhöhter Aufwand über mehrere Versionen und Browserweichen
  • HTML5-Spektrum mit JavaScript-APIs sehr komplex
  • Kein Standard für Audio/Video-Codecs – wie eigentlich geplant
  • Mangel an Zugänglichkeit über Screenreader
  • JavaScript-Sicherheitslücken über Cross-Site-Scripting
  • Noch keine ausgereiften und stabilen Entwicklungsumgebungen verfügbar (z.B. Adobe Edge neu)
  • JavaScript bietet noch keine ausgereifte 3D-Technologie

####Flash

#####Vorteile

  • Über Plugin keine Probleme mit Browserkompatibilität
  • Effektivere Cross-Browser-Entwicklung
  • Einfaches Einbetten von Multimedia-Content wie Animationen, Audio, Video
  • Stabile Plattform mit weit verbreitetem Plugin
  • Ausgereifte Werkzeuge und Entwicklungsumgebungen Z.B. Adobe Flex oder Air
  • ActionScript inzwischen deutlich mächtiger als JavaScript
  • Entwicklerhilfen wie z.B. Code Completion, Refactoring
  • 3D-Unterstützung ausgereift und weiter auf Vormarsch
  • Über DirectX (Windows) oder OpenGL (Linux) bzw. softwarebeschleunigt
  • Auslesen und Ansteuern von Ausgabegeräten in Echtzeit, Multi- Touch-Anwendungen, Motion-Steuerung und komplexe Interfaces möglich
  • Schnelle Weiterentwicklung durch kommerziellen Hintergrund
Nachteile
  • Proprietäres, geschlossenes Format
  • Adobes kommerzielle Eigenentwicklung
  • Plugininstallation in Form von Flashplayer nötig
  • Mangelnde Performance für Nicht-Windows-Nutzer
  • Sicherheitslücken über Plugin
  • Kein Flashplayer für iPhone/iPad
  • Auffindbarkeit von Informationen problematisch über kompiliertes swf-Format: Suchmaschinenunfreundlich, Problem der Indexierung.

Einbettung

Bei Verwendung des HTML5-Videoelementesist wie erwähnt kein Plug-In auf Clientseite nötig, der gesamte Vorgang wird deutlich reduziert und vereinfacht. Das entscheidende Element zur Einbindung eines Videos in HTML5 ist das <video>-Tag.

Dies wäre die kürzeste und einfachste Weise für eine Implementierung, jedoch weist diese bei der Ausgabe im Browser noch nicht allzu viele Funktionalitäten auf:

<video src=“test.mp4“>
</video>

Um eindeutig zu identifizieren welches Format eine Datei besitzt wird die standardisierte Angabe des **MIME-Typs **angegeben. MIME steht für „Multipurpose Internet Mail Extensions“. Am Namen ist zu erkennen, dass diese Spezifizierung zunächst für Emails vorgesehen, speziell Email mit Dateienanhang. Um den Text der Mail und die ZIP-Datei unterscheiden zu können musste eine Konvention gefunden werden. Dieses Schema erwies sich aber auch in weiteren Bereichen, z.B. im Web bei der Kommunikation zwischen Server und Browser, als nützlich um die Daten zu identifizieren die jeweils übertragen werden.

Auch bei der Einbindung von Video-/Audioelementen ist es nötig im Code einen eindeutigen Typ zu definieren. Die Form, in der das geschieht, ist „Kategorie/Unterkategorie“, z.B. „type=video/mp4“.

Beispiel:

<video controls poster="bild.png" >
	<source src="test.mp4"  type="video/mp4" >
</video>

Die Funktionalität der Medienelemente kann mit Hilfe von verschiedenen Attributen genauer definiert werden.

Die wichtigsten werden folgend aufgelistet (Für Audio gelten größtenteils die selben):

src Quelle des Videos mit Verweis auf die Videodatei
width und height Gibt die Höhe und Breite des Videos im Browser an. Eine automatische Anpassung findet statt wenn nur eine Größe angegeben wird, damit das Seitenverhältnis korrekt gewahrt wird (nur für Video-Tag)
controls Zeigt bei Aktivierung im Browser eine Video-Navigation an, d.h. Wiedergabe und Lautstärkebuttons werden angezeigt. Ansonsten würde nur der erste Frame des Videos oder ein vorher festgelegtes Bild angezeigt werden.
poster Verweist auf ein Bild das angezeigt wird, während das Video lädt oder bevor es abgespielt wird (poster=“bild.jpg“) (nur für Video-Tag)
autoplay Automatische Wiedergabe des Videos bei Aufruf der Seite
preload Gibt an ob was im Hintergrund geladen werden soll
(preload=“auto|metadata|none“)
loop Legt fest ob das Video in einer Schleife wiedergegeben wird
muted Legt fest ob das Video beim Abspielen stumm geschaltet wird 
<video controls poster="bild.png" width="400"  height="240" autoplay muted loop>
	<source src="test.mp4" type="video/mp4" />
</video>

Das Beispiel zeigt zunächst ein Bild bevor das Video gestartet wird und das Frame hat die Größe 400x200 Pixel. Die Attribute „autoplay“, „muted“ und „loop“ sorgen dafür dass das Video automatisch, stumm geschaltet und in einer Schleife abgespielt wird.

#####Fallback

Eine Einbindung eines Videos mittels HTML5 stellt für die aktuellen Internetbrowser kein Problem dar, sie benötigen jedoch, wie erwähnt jeweils ein unterstütztes Format, mehrere Dateien können einfach innerhalb des <video>-Tags über das <source>-Tag angegeben werden. Unterstützt ein Browser mehrere der angegebenen Quellen, wird das oberste abgespielt. Bei älteren Browsern kann jedoch der Fall auftreten, dass kein HTML5 unterstützt wird, demnach auch kein Video angezeigt werden kann. Um dieses Problem zu umgehen kann in Form eines normalen HTML-Codes ein Fallback definiert werden, der innerhalb des jeweiligen <video>-Tags geschrieben wird.

Eine Fallbackmöglichkeit ist das Anzeigen von Standard HTML-Inhalten, wie bspw. ein Bild über das <img>-Tag oder Text. Diese Inhalte werden dann von Browsern angezeigt die das Video-Tag nicht lesen können.

<video  width="640" height="480" autoplay>
    <source src="test.mp4" type="video/mp4" />
    <source src="test.ogv" type="video/ogg" />
    <img src=”test.jpg” alt”Videostandbild” />
    Ihr Browser unterstützt kein HTML5-Video
</video>

Eine andere Fallbackmöglichkeit ist das Wiedergeben von Video/Audio mit Flash. Genau wie im oberen Beispiel wird hier anstelle von einem Bild oder Text ein Flashelement zwischen dem <video>- bzw. <audio>-Tag geschrieben. So kann der Inhalt auch von einem Browser wiedergegeben, der kein HTML5-Video unterstützt.

		<video poster="html5.png" width="640" height="360" id="video">
			<source src="test-480.mp4" type="video/mp4">
			<source src="test-480.webm" type="video/webm">
			<object type="application/x-shockwave-flash" data="player.swf" width="640" height="384">
			Steuerelemente: 24 px hoch
			<param name="allowfullscreen" value="true">
			<param name="allowscriptaccess" value="always">
			<param name="flashvars" value="file=test-480.mp4">
			<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
			</object>
			<img src="video.jpg" width="640" height="360" alt="Video">
			<p>Dein Browser kann keine HTML5 Videoinhalte wiedergeben. <a href="test-480.mp4">test-480.mp4 laden</a></p>
		</video>

5. SVG-Grafiken

Allgemein

SVG als Standalone ist klasse, aber der Clou von SVG ist der nahtlose Einsatz von SVG-Grafik im HTML-Markup der Webseite.

Früher musste man die Grafiken für Vorlesungen und Webseiten mit Photoshop anlegen und als PNG exportieren. Aber bei jeder Änderung muss das Original – sei es nun ein TIFF in Photoshop oder eine SVG-Grafik aus Inkscape oder Illustrator – wieder hervorgekramt und geändert werden. Dann die Grafik wieder als PNG oder GIF exporieren und erneut in die Webseite einbinden. SVG für Grafiken ist flexibler als GIF- oder PNG-Bilder, kann mit PHP dynamisch erzeugt werden (z.B. für Statistiken und Graphen) und erlaubt obendrein Links aus der Grafik. Und nicht zu vergessen: Auch Javascript kann in die Grafik eingreifen und die Tortengrafik in Bewegung setzen.

Einbettung

#####Ohne großen Aufwand wird eine einfache SVG-Grafik mit einem img-Tag in der Webseite angezeigt.

<img src="sonnenblumen.svg" alt="">

Vorteile:

  • Das img-Tag bietet die bekannteste Syntax.

Nachteile:

  • Links und Javascript in der SVG-Grafik werden nicht unterstützt

#####Mehr Vorteile hingegen bietet der Object-Tag:

<object data="sonnenblumen.svg" type="image/svg+xml"> </object>

Vorteile:

  • Die SVG-Grafik kann mit Javascript animiert werden
  • Formen können im SVG-Quelltext mit Links versehen werden
  • Fallback durch Inhalt des object-Tags für IE: Ein alternatives Bild zwischen dem öffnenden und schließenden object-Tag kann die alten Versionen von IE abspeisen

Nachteile:

  • Die Editoren der Content Management Systeme mischen das object-Tag unweigerlich auf und basteln ein object-Tag für Flash-Video

6. Quellen

Bilder

Audio

Videos

###Bearbeitungsweise

Für unsere Dokumentation gab es keine grundlegende Vorlage. Bei den Quellenangaben kann man ersehen, welche Informationen von welcher Seite benutzt wurden. Unsere Dokumentation ist also etwas zusammengewürfelt aus verschiedenen anderen Dokumentationen und anderen Internetquellen.

Clone this wiki locally