Multimedia

Nebst Text, Grafiken und Bildern können auch Video- sowie Audiodateien in eine Webseite eingebunden werden. Bis zu Version HTML4 war Hypertext jedoch nicht multimediafähig und die Medien mussten über Plug-Ins (wie Flash, QuickTime oder Acrobat Reader) eingebettet werden. Voraussetzung hierfür ist jedoch, dass die Anwendenden die entsprechenden Plugins auf ihren Computern installiert haben, so dass die Dateien angezeigt werden. Plug-Ins werden mit dem HTML-tag 'object data' eingebunden. Aufgrund dieses Befehls ermittelt der Browser, welches Plugin genutzt werden muss, um die Datei anzuzeigen. Nebst der Datei werden noch die Breite und Höhe definiert:

<object data="video.mov" width="600" height="400"></object>


Multimediaformate

In HTML5 können Multimediaobjekte direkt eingebunden werden, ohne Plug-Ins zu benötigen. Hierfür werden der 'audio'-tag und der 'video'-tag verwendet.
Da Multimediadateien meist sehr gross sind, müssen sie komprimiert über das Internet gestreamt werden. Dazu werden verschiedene Codecs (Coder/Decoder) verwendet. Hierbei handelt es sich um ein Verfahren zur Komprimierung während der Aufzeichnung und der Dekomprimierung während des Abspielens der Mediendateien.

Die wichtigsten Formate und Codecs fürs Web:

.mp3 (Audio): MP3 (MPEG-1 Audio Layer 3) komprimiert Audiodateien verlustbehaftet, wobei die Wahrnehmung gering beeinträchtig wird. Die Dateien sind aufgrund einer hohen Kompressionsrate klein und deshalb hat sich MP3 für das wichtiges Audioformat im Web entwickelt.
.ogg (Audio): Container-Format für Video, Audio und Text. Es können unterschiedliche Codecs enthalten sein, meist wird der patentfreie Vorbis-Codec verwendet. Vorbis-Codec komprimiert auch verlustbehaftet, die daraus resultierenden Dateien sind jedoch grösser.
.mp4 (Video): MPEG-4 kommt von dem QuickTime-Format (Apple) hervor und kann Video- und Audiospuren speichern. Für das MPEG-4-Format wird der patentgeschützte H.264-Codec verwendet.
.ogv (Video): For OGV-basierte Videos wird der patentfreie Codec Thora verwendet. Die Kompressionsrate ist weniger hoch als die des H.264-Codecs.

Audio
Um Audio in HTML5 einzubinden, wird das 'audio'-tag verwendet. Innerhalb dieses tags wird auf die Audiodatei/Source sowie auf alternative Dateiformate hingewiesen. Die direkt im audio-tag integrierte Audiodatei sollte ein Format haben, welches jeder Browser erkennt (z.B. MP3). Zusätzlich können folgende Angaben/Attribute eingefügt werden:

src = URL der abzuspielenden Datei
preload = direktes Laden der Datei
autoplay = Inhalt wird direkt während des Ladens abgespielt (Wert: true / false)
loop = Endlosschleife (Wert: true / false)
controls = Steuerelement (Abspielen/Pause/Position/Lautstärke)

<audio preload controls src="musik.mp3" autoplay="false"></audio>

Es können auch zwei unterschiedliche Formate gleichwertig angegeben werden, indem zuerst die Attribute innerhalb des audio-tags und danach die Dateien/Source angegeben werden:

<audio preload controls>

<source src="musik.mp3">

<source src="musik.ogg">

</audio>


Video
Die Videoeinbindung in HTML5 funktioniert ähnlich. Hier wird das 'video'-tag verwendet. Innerhalb dieses tags wird auf die Videodatei/Source sowie auf alternative Dateiformate hingewiesen. Die direkt im video-tag integrierte Datei sollte ein Format haben, welches jeder Browser erkennt (z.B. MP4). Zusätzlich können folgende Angaben/Attribute eingefügt werden:

src = URL der abzuspielenden Datei
preload = direktes Laden der Datei
autoplay = Inhalt wird direkt während des Ladens abgespielt (Wert: true / false)
loop = Endlosschleife (Wert: true / false)
controls = Steuerelement (Abspielen/Pause/Position/Lautstärke)
width / height = Breite und Höhe in Pixeln angegeben
poster = Bild, falls Video nicht abgespielt werden kann

<video src="video.mp4" width="600" height="400" preload controls poster="Bild.jpg"></video>


Um ganz sicher zugehen, dass das Video garantiert abgespielt wird, sollten verschieden Videoformate geladen werden und gleichwertig nebeneinander angeben werden. Zuerst werden die zusätzlichen Attribute innerhalb des video-tags aufgelistet und dann folgen die verschieden Videoformate. Falls der Browser keiner dieser Formate unterstützt, kann das Video nebst 'object data' noch als 'embed' eingefügt werden (inkl. Breiten- und Höhenangaben):

<video width="600" height="400" controls preload poster="bild.jpg">

<source src="video.mp4">

<source src="video.ogg">

<object data="video.mp4" width="600" height="400">

<embed src="video.mov" width="600" height="400">

</object>

</video>


Iframe
Es gibt ferner die Möglichkeit, Videos direkt aus Plattformen wie youtube oder vimeo einzubinden. Bei dem einzubindenden Video findet man den mit iframe beginnenden embed code, welcher auf die HTML-Seite kopiert wird.

<iframe width="560" height="315"

src="http://www.youtube.com/embed/edgmuEMIFQc"

frameborder="0" allowfullscreen></iframe>

Vorherige Seite: Layout / Komposition Nächste Seite: Responsive Design