Multimedia

Moderne Websites nutzen längst nicht mehr nur Text und Bilder. Videos, Audiofiles oder eingebettete externe Inhalte (z. B. YouTube, Karten oder PDFs) sorgen dafür, dass Seiten interaktiver und spannender wirken. Damit solche Medien im Browser korrekt angezeigt oder abgespielt werden können, stellt HTML verschiedene Elemente zur Verfügung.

Audio

Audiodateien können direkt mit dem <audio>-Element eingebunden werden. Der Browser zeigt je nach Attributen einen kleinen Player mit Play/Pause an.

<audio src="media/audio.mp3" controls></audio>

Attribute

Attribut	Beschreibung
src	Pfad zur Audiodatei (mp3, wav, ogg).
controls	Zeigt die Steuerungselemente an (Play, Pause, Lautstärke). Wichtig: Ohne controls kann die Datei abgespielt werden, aber die Nutzer:innen sehen keinen Player.
autoplay	Startet das Audio automatisch – wird aus Datenschutzgründen oft blockiert.
loop	Spielt die Datei dauerhaft im Kreis ab.
muted	Startet das Audio stumm. Wird oft mit autoplay kombiniert.

Video

Videos werden mit dem <video>-Element eingefügt. Die Funktionsweise ist ähnlich wie bei <audio>, aber um visuelle Inhalte erweitert.

<video src="media/video.mp4" controls></video>

Attribute

Attribut	Beschreibung
src	Pfad zum Video.
controls	Zeigt Play/Pause, Zeitangaben und Lautstärkeregler an.
width / height	Legt die Videogröße fest (ähnlich wie bei <img>).
autoplay, loop, muted	Funktionieren wie bei <audio>.
poster	Zeigt ein Vorschaubild an, bevor das Video startet. Ohne poster wird der erste Frame gezeigt.

<video src="media/video.mp4" controls poster="images/vorschau.jpg"></video>

iframe

Das <iframe>-Element dient dazu, externe Inhalte in deine Website einzubetten. Häufig für:

• YouTube-Videos

• Google Maps

• PDF-Viewer

• Interaktive Tools oder andere Websites

Der Name bedeutet inline frame – also ein eingebettetes Browserfenster innerhalb deiner Seite.

<iframe
  src="https://www.youtube.com/embed/xyz123"
  width="560"
  height="315"
  allowfullscreen
></iframe>

Attribute

Attribut	Beschreibung
src	Adresse des eingebetteten Inhalts.
width / height	Steuern die Größe.
allowfullscreen	Erlaubt es, das Video im Vollbild zu öffnen.
loading=“lazy“	Der Inhalt wird erst geladen, wenn er sichtbar wird (Performance!).

embed

<embed> bindet externe Inhalte ein – typisch sind:

• PDFs

• SVGs

• kleine Anwendungen

• externe Grafiken

Das Element ist selbstschließend und sehr einfach aufgebaut.

<embed src="dokument.pdf" width="600" height="400" />

Attribute

Attribut	Beschreibung
src	Pfad zur Datei.
type	Gibt an, um welche Art von Datei es sich handelt (optional). Beispiel: type="application/pdf"
width / height	Definieren die Größe.