Homepage-Webhilfe Event-Banner

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.


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

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

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

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 height dienen zum Festlegen der Breite und Höhe. Die Angabe darf auch hier ebenfalls nur in Pixeln (ohne Einheit) erfolgen.

<embed type="application/x-shockwave-flash" src="/Flash/Beispiele/Rechteckanimation.swf" width="220" height="250" />
Vorschau
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK