Medien-Einbindung
HTML bietet neben der Einbindung von Bildern mittels des img-Tags auch die Möglichkeit, andere Medien-Dateien
wie z. B. Audio-, Video- oder Flash-Dateien einzubinden. Die dafür notwendigen Elemente und Attribute stellen wir Ihnen
hier vor.
Fremdseiten
Bevor wir uns mit der Einbindung von den „richtigen“ Medien-Dateien beschäftigen, wollen wir Ihnen noch die sogenannten
iFrames vorstellen. iFrames ermöglichen es, andere Dateien (zumeist andere HTML-Dokumente) innerhalb eines
Kästchens anzuzeigen und somit in die aktuelle Seite zu integrieren. Die einzubindende Datei kann dabei auf der
gleichen Website oder auch auf einer externen Website (Fremdseite) liegen. iFrames werden durch das zweiteilige Element
iframe notiert. Das Attribut src gibt die URL zu der anzuzeigenden Datei an. Der Text zwischen
den iframe-Tags legt einen Text fest, welcher angezeigt werden soll, wenn der Browser keine iFrames
unterstützt. Alle modernen Browser unterstützen jedoch iFrames. Die Höhe und Breite eines iFrames kann mit Hilfe der
Attribute height und width festgelegt werden. Die Werte im height- und
width-Attribut müssen in Pixel (ohne Einheit) angegeben werden.
<iframe src="absaetze.html" width="600" height="400">Ihr Browser unterstützt kein iFrames.</iframe>
Audio
Um Audio-Dateien in eine Seite mittels HTML einzubinden, gibt es das audio-Element. Innerhalb des audio-Elements
werden sowohl source-Elemente sowie optional ein Text (wird angezeigt, falls der Browser die Einbindung von
Audio-Dateien nicht unterstützt) notiert. Das audio-Element verfügt über einige Attribute zum Festlegen von
Einstellungen. Deren Werte entsprechen dabei immer dem Attribut-Namen bzw. könnten für gültiges HTML5 auch weggelassen werden.
Wird das autoplay-Attribut notiert, so wird die Musik automatisch abgespielt. Wollen wir dem Benutzer eine
Steuerung (Pause, Spulen und Lautstärke) für die Musik anzeigen, so müssen wir das controls-Attribut notieren.
Das loop-Attribut gibt an, ob die Musik in einer Endlosschleife wiedergegeben werden soll. Ein weiteres Attribut
ist muted, wird dieses angegeben, so ist der Ton stummgeschaltet. Wird die Steuerung angezeigt, so kann die
Stummschaltung auch wieder durch den Benutzer deaktiviert werden.
Das source-Element gibt die Quelle der abzuspielenden Datei an. source-Elemente sind einteilig und verfügen
über die Attribute src und type. Das src-Attribut gibt die URL der Datei an. Mit dem
type-Attribut geben wir den MIME-Typ der Datei an. Die folgende Tabelle zeigt die aktuell möglichen Dateitypen sowie
deren MIME-Typ und Browser-Unterstützung:
| Dateityp | MIME-Typ | Firefox | Chrome | Opera | Safari | IE / Edge |
|---|---|---|---|---|---|---|
| MP3 | audio/mpeg | ja | ja | ja (bei Opera Mini, nein) | ja | ja (ab IE9) |
| WAV | audio/wav | ja | ja | ja (bei Opera Mini, nein) | ja | ja (ab Edge 13) |
| OGG | audio/ogg | ja | ja | ja (bei Opera Mini, nein) | nein | nein |
Aus aktuellem Stand ist daher ersichtlich, dass die Verwendung von MP3-Dateien die sicherste Variante zur Einbindung von Audio-Dateien
ist. Trotzdem haben wir uns im folgenden Beispiel dazu entschieden, alle unterstützten Dateiformate einzubinden. Dies ist möglich,
indem wir die Datei mehrmals auf unserem Server in unterschiedlichen Formaten ablegen und innerhalb des audio-Elements
mehrere source-Elemente notieren. Natürlich ist es auch möglich, nur ein oder zwei source-Elemente anzugeben.
<audio autoplay="autoplay" controls="controls"> <source src="/Musik/Beispiele/Tonleiter.mp3" type="audio/mpeg" /> <source src="/Musik/Beispiele/Tonleiter.ogg" type="audio/ogg" /> <source src="/Musik/Beispiele/Tonleiter.wav" type="audio/wav" /> </audio>
Video
Die Einbindung von Video-Dateien ist mit der Einbindung von Audio-Dateien zu vergleichen. Für Videos benötigen wir das video-Element.
Die Attribute autoplay, controls, loop und muted gibt es hier ebenfalls. Deren Bedeutung
entspricht der gleichen wie beim audio-Element. Zusätzliche Attribute für das video-Element sind width,
height und poster. width und height legen die Breite und Höhe des anzuzeigenden
Video-Players fest. Über das poster-Attribut kann die URL zu einem Bild angegeben werden, welches vor dem Abspielen des
Videos oder während dem Laden angezeigt wird. Innerhalb der video-Tags werden ebenfalls wieder source-Elemente
sowie bei Bedarf ein Text, welcher angezeigt werden soll, wenn der Browser keine Videos unterstützt, angezeigt. Die möglichen Formate
für das video-Element sowie deren MIME-Typ und Browserunterstützung sind in folgender Tabelle aufgestellt:
| Dateityp | MIME-Typ | Firefox | Chrome | Opera | Safari | IE / Edge |
|---|---|---|---|---|---|---|
| MP4 | video/mp4 | ja | ja | ja (bei Opera Mini, nein) | ja | ja (ab IE9) |
| WEBM | video/webm | ja | ja | ja (bei Opera Mini, nein) | nein | ja (ab Edge 14) |
| OGG | video/ogg | ja | ja | ja (bei Opera Mini, nein) | nein | nein |
Hier scheint aus aktuellem Stand die Verwendung von MP4 am besten zu sein, da es von den meisten aktuellen Browsern unterstützt wird. Wie auch beim Audio-Beispiel haben wir in folgendem Beispiel-Code alle Dateitypen eingebunden:
<video controls="controls" width="480" height="270" poster="/Bilder/Logo/Logo.png"> <source src="/Video/Beispiele/Event-Banner.mp4" type="video/mp4" /> <source src="/Video/Beispiele/Event-Banner.webm" type="video/webm" /> <source src="/Video/Beispiele/Event-Banner.ogg" type="video/ogg" /> </video>
Flash
Um Flash-Anwendungen in eine Webseite zu integrieren, gibt es das embed-Element. Das embed-Element ist
ein universelles Element und dient allgemein zur Einbindung externer Daten und Medien. So ist es z. B. auch möglich, Videos per
embed-Tag einzubinden. Hier ist jedoch Vorsicht in Bezug auf die Browserunterstützung geboten. Die Einbindung von
Flash-Anwendungen per embed-Tag wird dagegen von allen aktuellen Browsern unterstützt. Das embed-Element
ist einteilig und verfügt über 4 Attribute: src, type, width und height.
src gibt die Quelle der Datei in Form einer URL an. Als Wert des type-Attributs ist der
MIME-Typ der Datei anzugeben. Für Flash-Anwendungen ist dies application/x-shockwave-flash. width
und
<embed type="application/x-shockwave-flash" src="/Flash/Beispiele/Rechteckanimation.swf" width="220" height="250" />