DevPanicZone Logo DevPanicZone! Cheatsheets.

HTML Audio & Video

HTML5 ermöglicht es, Audio- und Videodateien ohne Plugins direkt im Browser abzuspielen. Du kannst eigene Medien einbinden, steuern und sogar als Hintergrundvideos oder dynamische Inhalte nutzen.

Audio in HTML

Mit dem <audio>-Tag kannst du Musik, Sprachaufnahmen oder Soundeffekte direkt im Browser abspielen. Standardmäßig wird ein Player mit Play/Pause angezeigt, wenn du das Attribut controls verwendest.

HTML 
<audio controls>
    <source src="audio/song.mp3" type="audio/mpeg">
    <source src="audio/song.ogg" type="audio/ogg">
    Dein Browser unterstützt das Audioelement nicht.
</audio>

Wichtige Attribute

  • controls - zeigt die Steuerelemente (Play, Pause, Lautstärke)
  • autoplay - startet das Audio automatisch (funktioniert oft nur ohne Ton oder mit User-Interaktion)
  • loop - spielt das Audio in Endlosschleife
  • muted - startet stumm (z. B. für Hintergrundsounds)
  • preload - bestimmt, ob und wie viel geladen wird: none, metadata oder auto

Unterstützte Audioformate

Format Typ Browserunterstützung
MP3 audio/mpeg Alle modernen Browser
Ogg audio/ogg Firefox, Chrome, Edge
WAV audio/wav Alle modernen Browser

Video in HTML

Das <video>-Tag funktioniert ähnlich wie <audio> - nur mit zusätzlicher Anzeige eines Bildes. Du kannst Videos lokal einbinden oder über URLs laden.

HTML 
<video controls width="640" height="360">
    <source src="video/demo.mp4" type="video/mp4">
    <source src="video/demo.webm" type="video/webm">
    Dein Browser unterstützt das Videoelement nicht.
</video>

Wichtige Attribute

  • controls - zeigt die Steuerleiste an
  • autoplay - startet das Video automatisch (oft nur mit muted)
  • loop - wiederholt das Video endlos
  • muted - startet das Video ohne Ton
  • poster - zeigt ein Vorschaubild vor dem Start
  • playsinline - wichtig für mobile Geräte, damit das Video nicht im Vollbild startet

Unterstützte Videoformate

Format Typ Browserunterstützung
MP4 (H.264) video/mp4 Alle modernen Browser
WebM video/webm Chrome, Firefox, Edge
Ogg video/ogg Firefox, Opera

Hintergrundvideos

Ein beliebter Effekt auf modernen Websites sind Videos im Hintergrund, meist stumm und in Dauerschleife.

HTML 
<video autoplay muted loop playsinline class="background-video">
    <source src="media/background.mp4" type="video/mp4">
</video>
Tipp

Achte auf die Dateigröße und Performance. Ein Hintergrundvideo sollte klein und dezent sein, sonst beeinträchtigt es Ladezeiten und Lesbarkeit.

Responsive Videos

Videos sollten sich an verschiedene Bildschirmgrößen anpassen. Hier sind die gängigsten Methoden:

Methode 1: CSS width

Die einfachste Lösung für responsive Videos:

CSS 
video {
    width: 100%;
    max-width: 800px;  /* Maximale Breite */
    height: auto;      /* Behält Seitenverhältnis */
}

Methode 2: Aspect Ratio Container

Für eingebettete Videos (iframes) mit festem Seitenverhältnis:

HTML + CSS 
<div class="video-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;  /* Modernes CSS */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
</style>
Browser-Support

aspect-ratio wird von allen modernen Browsern unterstützt. Für ältere Browser gibt es den klassischen Padding-Hack mit padding-bottom: 56.25% (für 16:9).

Performance & Lazy Loading

Videos sind oft die größten Dateien auf einer Website. Mit diesen Techniken optimierst du die Ladezeit:

Preload-Strategien

Wert Beschreibung Empfohlen für
none Lädt nichts vor Videos, die selten abgespielt werden
metadata Lädt nur Metadaten (Länge, Abmessungen) Die meisten Anwendungsfälle
auto Browser entscheidet (oft komplettes Video) Wichtige Videos, die sofort starten sollen
HTML 
<!-- Optimiert: Nur Metadaten laden, Poster anzeigen -->
<video controls preload="metadata" poster="video/thumbnail.jpg">
    <source src="video/demo.mp4" type="video/mp4">
</video>

<!-- Lazy Loading für Videos außerhalb des Viewports -->
<video controls preload="none" loading="lazy">
    <source src="video/demo.mp4" type="video/mp4">
</video>

Komprimierung & Formate

  • WebM: Kleiner als MP4, gute Qualität - als erste <source> angeben
  • MP4 (H.264): Universell kompatibel - als Fallback
  • Auflösung: Biete verschiedene Qualitätsstufen an (720p, 1080p)
  • Tools: FFmpeg, HandBrake für Komprimierung
Autoplay-Einschränkungen

Browser blockieren Autoplay mit Ton aus UX-Gründen. autoplay funktioniert nur zuverlässig mit muted. Für Videos mit Ton muss der User erst interagieren (Klick, Scrollen).

Barrierefreiheit bei Medien

  • Füge immer Alternativtexte oder Beschreibungen hinzu.
  • Untertitel <track kind="subtitles"> helfen hörgeschädigten Nutzern.
  • Stelle Transkripte für Audios bereit, wenn möglich.
  • Verwende aria-label oder aria-describedby bei eingebetteten Medien zur Erklärung des Inhalts.
HTML 
<video controls>
    <source src="video/tutorial.mp4" type="video/mp4">
    <track src="video/subtitles.vtt" kind="subtitles" srclang="de" label="Deutsch">
</video>

WebVTT-Format für Untertitel

Das .vtt-Format ist der Standard für Untertitel im Web:

VTT 
WEBVTT

00:00:00.000 --> 00:00:03.000
Willkommen zum Tutorial!

00:00:03.500 --> 00:00:07.000
Heute lernen wir HTML Audio und Video.

00:00:08.000 --> 00:00:12.000
Beginnen wir mit dem <audio>-Element...
HTML 
<video controls>
    <source src="video/tutorial.mp4" type="video/mp4">
    
    <!-- Untertitel -->
    <track src="video/subtitles-de.vtt" kind="subtitles" 
           srclang="de" label="Deutsch" default>
    <track src="video/subtitles-en.vtt" kind="subtitles" 
           srclang="en" label="English">
    
    <!-- Audiodeskription für Sehbehinderte -->
    <track src="video/descriptions.vtt" kind="descriptions" 
           srclang="de" label="Audiodeskription">
</video>

Track-Arten (kind)

Wert Beschreibung
subtitles Untertitel (Dialog, Übersetzungen)
captions Untertitel + Geräusche für Gehörlose
descriptions Audiodeskription für Sehbehinderte
chapters Kapitelmarken zur Navigation
metadata Maschinenlesbare Daten (für JavaScript)

Externe Plattformen einbinden

Statt lokale Dateien kannst du auch Inhalte von YouTube, Vimeo oder SoundCloud einbinden. Dazu nutzt du meist ein <iframe>:

HTML 
<iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    allow="autoplay; encrypted-media"
    allowfullscreen>
</iframe>
Tipp

Prüfe DSGVO-Hinweise, da externe Plattformen Cookies setzen können.

Mehr aus HTML

Tutorials werden geladen...