Multimedia in HTML

Die Einbindung von Multimedia-Elementen wie Audio, Video und interaktiven Inhalten macht Webseiten dynamischer und ansprechender. HTML5 bietet native Unterstützung für Audio- und Videoelemente, ohne dass Plugins wie Flash erforderlich sind.

Audio einbinden

Mit dem <audio>-Element können Sie Audiodateien direkt in Ihre Webseite einbetten. Durch Angabe mehrerer Quellen in verschiedenen Formaten wird die bestmögliche Browser-Kompatibilität gewährleistet.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Das controls-Attribut zeigt die Standard-Audiobedienelemente an (Play/Pause, Zeitleiste, Lautstärke). Der Text zwischen den Tags wird nur angezeigt, wenn der Browser das Audio-Element nicht unterstützt. Vorschau:

Audio-Attribute

Das <audio>-Element unterstützt verschiedene Attribute zur Steuerung des Audioplayers:

<audio controls autoplay loop muted preload="auto">
  <source src="hintergrundmusik.mp3" type="audio/mpeg" />
</audio>

controls: Zeigt die Bedienelemente an
autoplay: Startet die Wiedergabe automatisch (funktioniert auf vielen mobilen Geräten nur, wenn auch muted gesetzt ist)
loop: Wiederholt die Audiodatei endlos
muted: Startet mit stummgeschalteter Audiowiedergabe
preload: Steuert, ob und wie der Browser die Audiodatei vorladen soll:
auto: Lädt die gesamte Audiodatei
metadata: Lädt nur Metadaten (Länge, etc.)
none: Lädt nichts im Voraus

Video einbinden

Das <video>-Element ermöglicht die direkte Einbindung von Videos in HTML5-Webseiten, ohne Plugins.

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Durch Angabe mehrerer Quellformate (mp4, WebM) wird sichergestellt, dass das Video in allen modernen Browsern abgespielt werden kann.

Video-Attribute

Das <video>-Element bietet verschiedene Attribute zur Anpassung der Wiedergabe:

<video
  width="640"
  height="360"
  controls
  autoplay
  loop
  muted
  poster="vorschaubild.jpg"
  preload="metadata"
>
  <source src="video.mp4" type="video/mp4" />
</video>

width und height: Definieren die Abmessungen des Videoplayers
controls: Zeigt Steuerelemente wie Play/Pause, Lautstärke und Vollbild
autoplay: Startet die Wiedergabe automatisch (funktioniert oft nur mit muted)
loop: Wiederholt das Video endlos
muted: Startet mit stummgeschalteter Wiedergabe
poster: Zeigt ein Vorschaubild an, bevor das Video abgespielt wird
preload: Wie bei Audio, steuert das Vorladen des Videos

YouTube-Videos einbetten

Die Einbettung von YouTube-Videos erfolgt über das <iframe>-Element:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

Sie können den Einbettungscode direkt von YouTube erhalten:

Öffnen Sie das Video auf YouTube
Klicken Sie auf “Teilen” und dann auf “Einbetten”
Kopieren Sie den generierten HTML-Code

YouTube bietet zusätzliche Parameter zur Anpassung des eingebetteten Players:

?autoplay=1: Startet die Wiedergabe automatisch
?start=30: Startet das Video bei Sekunde 30
?rel=0: Verhindert die Anzeige ähnlicher Videos am Ende
?controls=0: Versteckt die Steuerelemente

Beispiel mit Parametern:

<iframe
  width="560"
  height="340"
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&start=30"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

Andere externe Inhalte einbetten

Das <iframe>-Element kann verschiedene externe Inhalte in Ihre Webseite einbetten:

<!-- Google Maps einbetten -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
>
</iframe>

Sie können einen Google Maps-Einbettungscode erhalten durch:

Öffnen von Google Maps
Navigieren zum gewünschten Ort
Klicken auf “Teilen” und dann “Karte einbetten”
Kopieren des generierten HTML-Codes

PDF einbetten

<!-- PDF einbetten -->
<iframe
  src="dokument.pdf"
  width="100%"
  height="500px"
  title="Eingebettetes PDF-Dokument"
>
</iframe>

Bei eingebetteten PDFs zeigen moderne Browser einen integrierten PDF-Viewer an.

X (ehemals Twitter) einbetten

<!-- X-Post einbetten -->
<blockquote class="twitter-tweet">
  <a href="https://twitter.com/username/status/123456789">Post laden</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js"></script>

X (ehemals Twitter) bietet ein einfaches Widget zum Einbetten von Posts. Der Einbettungscode kann direkt von X bezogen werden, indem Sie bei einem Post auf die drei Punkte klicken und dann “Einbetten” wählen.

Responsive Multimedia

Um Multimedia-Elemente responsiv zu gestalten, können CSS und spezielle Techniken verwendet werden:

<!-- Responsives Video mit CSS -->
<div
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen
  >
  </iframe>
</div>

Das Verhältnis 56.25% entspricht dem 16:9-Format und sorgt dafür, dass das Video dieses Seitenverhältnis bei jeder Bildschirmgrösse beibehält.

Übung: Audio- und Videoinhalte einbinden

Erstellen Sie eine neue Seite “multimedia.html” für Ihren Blog:

Mit der üblichen Navigation und Struktur
Mit einer Hauptüberschrift “Multimedia-Inhalte”

Fügen Sie einen Audio-Bereich hinzu:

Mit einer Unterüberschrift “Podcast” oder “Audio-Beiträge”
Binden Sie mindestens eine Audio-Datei mit dem <audio>-Element ein
Bieten Sie zwei verschiedene Formate an (mp3 und ogg)
Stellen Sie sicher, dass Steuerelemente angezeigt werden
Fügen Sie einen beschreibenden Text und einen Fallback-Text hinzu
Sie können eigene Aufnahmen oder lizenzfreie Audioinhalte verwenden

Erstellen Sie einen Video-Bereich:

Mit einer Unterüberschrift “Video-Beiträge”
Binden Sie mindestens ein eigenes Video mit dem <video>-Element ein
Fügen Sie ein Poster-Bild hinzu
Bieten Sie verschiedene Formate an (mp4 und webm)
Stellen Sie sicher, dass Steuerelemente angezeigt werden
Sie können kurze Eigenaufnahmen oder lizenzfreie Videos verwenden

Fügen Sie einen Bereich mit eingebetteten externen Inhalten hinzu:

Betten Sie ein relevantes YouTube-Video ein
Fügen Sie eine Google Maps-Karte eines für Ihren Blog relevanten Ortes ein
Betten Sie einen X-Post oder einen anderen Social-Media-Beitrag ein, falls relevant

Verlinken Sie Ihre Multimedia-Inhalte mit den entsprechenden Blogartikeln:

Fügen Sie Links von Ihren Artikeln zu den Multimedia-Inhalten hinzu
Fügen Sie Links von den Multimedia-Inhalten zu den zugehörigen Artikeln hinzu

Hinweise

Sie können lizenzfreie Medien von folgenden Quellen verwenden:
- Audio: Freesound
- Video: Pixabay, Pexels, Videvo
Achten Sie auf angemessene Dateigrössen:
Komprimieren Sie Audiodateien auf maximal 128-256 kbps
Komprimieren Sie Videos auf eine webtaugliche Auflösung und Bitrate
Tools: Handbrake (Video), Audacity (Audio)
Nutzen Sie die “loading” und “preload”-Attribute zur Optimierung:
- loading="lazy" für iframes verzögert das Laden, bis der Nutzer nahe genug scrollt
- preload="metadata" oder preload="none" für Audio/Video reduziert die initiale Ladezeit
Berücksichtigen Sie die Barrierefreiheit:
- Bieten Sie Untertitel für Videos an (über das <track>-Element)
- Stellen Sie Transkripte für Audioinhalte bereit
- Verwenden Sie beschreibende Titel und Texte für alle Multimedia-Elemente
Beachten Sie rechtliche Aspekte:
- Verwenden Sie nur Inhalte, für die Sie die Rechte besitzen oder die unter freien Lizenzen stehen
- Geben Sie die erforderlichen Quellenangaben und Lizenzen an