HTML5 Multimedia - Video, Audio & Picture

Mit HTML5 kannst du Videos, Audio und responsive Bilder direkt ohne Plugins (wie Flash) einbinden. Das macht Multimedia im Web einfach und standardisiert!

Das `<video>` Element

Vor HTML5 brauchte man Flash oder andere Plugins für Videos. Heute geht es nativ mit dem <video>-Tag!

Einfaches Video einbinden

Basis Video

<video src="mein-video.mp4" controls width="640" height="360">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Wichtige Attribute:

src: Pfad zur Video-Datei
controls: Zeigt Play/Pause, Lautstärke, Fortschrittsbalken
width/height: Größe in Pixeln
Fallback-Text wird angezeigt, wenn Browser Videos nicht unterstützt

Video mit mehreren Quellen

Nicht alle Browser unterstützen alle Video-Formate. Biete deshalb mehrere Formate an:

Video mit Fallback-Formaten

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">

  Dein Browser unterstützt HTML5 Videos nicht.
  <a href="video.mp4">Video herunterladen</a>
</video>

Video-Formate:

MP4 (H.264): Beste Browser-Unterstützung, gute Qualität
WebM: Open Source, moderne Browser
Ogg: Open Source, ältere Unterstützung

Empfehlung: MP4 + WebM für maximale Kompatibilität

Video-Attribute im Detail

Alle wichtigen Video-Attribute

<video
  src="video.mp4"
  controls
  autoplay
  muted
  loop
  poster="thumbnail.jpg"
  preload="metadata"
  width="800"
  height="450"
>
  Fallback-Text
</video>

Attribute-Erklärung:

controls: Zeigt Player-Controls
autoplay: Startet automatisch (⚠️ nur mit muted!)
muted: Ohne Ton starten
loop: Video wiederholt sich endlos
poster: Vorschaubild bevor Video startet
preload:
- none: Nichts vorladen
- metadata: Nur Infos laden (Länge, Größe)
- auto: Ganzes Video vorladen

⚠️ Autoplay-Warnung:

Browser blockieren oft Autoplay mit Ton
Nervt Nutzer
Nutze nur mit muted oder lass es weg!

Responsive Video

Video soll sich an Bildschirmgröße anpassen:

Responsive Video mit CSS

<!-- HTML -->
<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

<!-- CSS -->
<style>
  .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
  }

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

Das `<audio>` Element

Audio-Dateien funktionieren ähnlich wie Videos:

Einfaches Audio einbinden

Basis Audio

<audio src="song.mp3" controls>
  Dein Browser unterstützt das Audio-Element nicht.
</audio>

Audio mit mehreren Quellen

Audio mit Fallback-Formaten

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.wav" type="audio/wav">

  Dein Browser unterstützt HTML5 Audio nicht.
  <a href="song.mp3">Audio herunterladen</a>
</audio>

Audio-Formate:

MP3: Beste Unterstützung, komprimiert
OGG: Open Source, gute Qualität
WAV: Unkomprimiert, sehr große Dateien

Empfehlung: MP3 für maximale Kompatibilität

Audio-Attribute

Audio mit allen Optionen

<audio
  src="podcast.mp3"
  controls
  autoplay
  loop
  muted
  preload="auto"
>
  Fallback-Text
</audio>

Gleiche Attribute wie Video:

controls, autoplay, loop, muted, preload

Custom Audio Player

Du kannst eigene Player mit JavaScript bauen:

Custom Audio Player

<audio id="myAudio">
  <source src="song.mp3" type="audio/mpeg">
</audio>

<button onclick="document.getElementById('myAudio').play()">
  ▶️ Play
</button>
<button onclick="document.getElementById('myAudio').pause()">
  ⏸️ Pause
</button>
<button onclick="document.getElementById('myAudio').currentTime = 0">
  ⏮️ Reset
</button>

Das `<picture>` Element - Responsive Bilder

Das <picture>-Element ermöglicht verschiedene Bilder für verschiedene Bildschirmgrößen oder Geräte:

Basis Responsive Image

Picture Element mit verschiedenen Größen

<picture>
  <!-- Großer Bildschirm (Desktop) -->
  <source
    media="(min-width: 1200px)"
    srcset="image-large.jpg"
  >

  <!-- Mittlerer Bildschirm (Tablet) -->
  <source
    media="(min-width: 768px)"
    srcset="image-medium.jpg"
  >

  <!-- Kleiner Bildschirm (Mobile) -->
  <source
    media="(min-width: 480px)"
    srcset="image-small.jpg"
  >

  <!-- Fallback -->
  <img src="image-default.jpg" alt="Beschreibung">
</picture>

Vorteile:

✅ Kleinere Dateien auf Mobile = schneller
✅ Bessere Qualität auf Desktop
✅ Automatische Auswahl durch Browser
✅ Weniger Datenverbrauch

Moderne Bildformate mit Fallback

Nutze moderne Formate (WebP, AVIF) mit Fallback zu JPG/PNG:

Moderne Bildformate mit Fallback

<picture>
  <!-- Modernste Format: AVIF -->
  <source srcset="image.avif" type="image/avif">

  <!-- Modernes Format: WebP -->
  <source srcset="image.webp" type="image/webp">

  <!-- Fallback: JPG -->
  <img src="image.jpg" alt="Produktfoto">
</picture>

Bildformat-Vergleich: | Format | Dateigröße | Qualität | Browser-Support | |--------|-----------|----------|-----------------| | AVIF | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Neueste Browser | | WebP | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Moderne Browser | | JPG | ⭐⭐⭐ | ⭐⭐⭐ | Alle Browser | | PNG | ⭐⭐ | ⭐⭐⭐⭐ | Alle Browser |

Art Direction - Verschiedene Bildausschnitte

Zeige auf Mobile einen anderen Bildausschnitt als auf Desktop:

Art Direction mit Picture

<picture>
  <!-- Desktop: Landscape -->
  <source
    media="(min-width: 768px)"
    srcset="banner-landscape.jpg"
  >

  <!-- Mobile: Portrait oder Square -->
  <source
    media="(max-width: 767px)"
    srcset="banner-portrait.jpg"
  >

  <img src="banner-default.jpg" alt="Produktbanner">
</picture>

Use Cases:

Banner: Landscape auf Desktop, Square auf Mobile
Portraits: Ganzer Körper vs. nur Gesicht
Infografiken: Horizontal vs. Vertikal

Multimedia Best Practices

Performance-Optimierung

Lazy Loading für Videos und Bilder

<!-- Lazy Loading für Bilder -->
<img src="image.jpg" alt="Beschreibung" loading="lazy">

<!-- Lazy Loading für Videos -->
<video controls preload="none" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Picture mit Lazy Loading -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Beschreibung" loading="lazy">
</picture>

Performance-Tipps:

✅ loading="lazy" für Bilder unterhalb des Folds
✅ preload="none" für Videos
✅ poster für Video-Thumbnails
✅ Komprimiere Bilder/Videos vor dem Upload
✅ Nutze CDN für schnellere Auslieferung

Accessibility für Multimedia

Barrierefreies Multimedia

<!-- Untertitel für Videos -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    kind="subtitles"
    src="subtitles-de.vtt"
    srclang="de"
    label="Deutsch"
    default
  >
  <track
    kind="subtitles"
    src="subtitles-en.vtt"
    srclang="en"
    label="English"
  >
</video>

<!-- Transcript für Audio -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
<details>
  <summary>Transkript anzeigen</summary>
  <p>Hier ist der vollständige Text des Podcasts...</p>
</details>

<!-- Alt-Text für Bilder -->
<img src="chart.jpg" alt="Balkendiagramm zeigt 80% Zustimmung">

<!-- Beschreibung für komplexe Bilder -->
<figure>
  <img src="infographic.jpg" alt="Infografik zum Klimawandel">
  <figcaption>
    Detaillierte Beschreibung: Die Infografik zeigt...
  </figcaption>
</figure>

Accessibility-Checkliste:

✅ Untertitel für Videos (WebVTT-Format)
✅ Transkripte für Audio
✅ Alt-Text für alle Bilder
✅ Controls immer aktivieren
✅ Keine Autoplay mit Ton
✅ Keyboard-Navigation möglich

📝 Quiz

Welches Video-Format hat die beste Browser-Unterstützung?

MP4 (H.264)WebMOGGAVI

⚡

Tipps & Tricks

Video-Komprimierung

Kostenloses Tool: HandBrake

Reduziert Dateigröße um 50-90%
Behält gute Qualität
Exportiert in MP4, WebM, etc.

Online-Tools:

CloudConvert.com
Video2Edit.com
Kompressor.io

Bild-Optimierung

Tools:

TinyPNG/TinyJPG - PNG/JPG Kompression
Squoosh.app - WebP/AVIF Konvertierung
ImageOptim (Mac) - Batch-Optimierung

Empfohlene Größen:

Hero-Bilder: max 1920px breit
Content-Bilder: max 1200px breit
Thumbnails: 300-600px breit

CDN für Multimedia

Nutze CDN (Content Delivery Network) für schnellere Ladezeiten:

Cloudinary - Automatische Optimierung
Cloudflare - Kostenlos für kleinere Sites
AWS S3 + CloudFront - Enterprise-Lösung

srcset und sizes

Für noch bessere responsive Bilder:

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 50vw,
    33vw
  "
  alt="Beschreibung"
>

❌

Häufige Fehler

Fehler 1: Autoplay mit Ton

❌ FALSCH:

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

✅ RICHTIG:

<!-- Mit muted -->
<video src="video.mp4" autoplay muted controls></video>

<!-- Oder ohne autoplay -->
<video src="video.mp4" controls></video>

Warum? Browser blockieren Autoplay mit Ton. Nervt Nutzer.

Fehler 2: Keine Fallback-Formate

❌ FALSCH:

<video src="video.webm" controls></video>

✅ RICHTIG:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Fehler 3: Zu große Dateien

❌ FALSCH:

<!-- 50 MB Video unkomprimiert -->
<video src="huge-video.mov" controls></video>

✅ RICHTIG:

<!-- 5 MB Video komprimiert -->
<video controls>
  <source src="optimized.mp4" type="video/mp4">
</video>

Faustregel:

Videos: max 10-20 MB
Bilder: max 200-500 KB
Hero-Images: max 1 MB

Fehler 4: Fehlende Alt-Texte

❌ FALSCH:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

✅ RICHTIG:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Produktfoto des neuen Smartphones">
</picture>

🔍

Debugging & Troubleshooting

Video spielt nicht

Prüfe:

Video-Format unterstützt? (MP4 funktioniert überall)
Pfad korrekt? (Relative vs. absolute URLs)
CORS-Header gesetzt? (Bei externen Videos)
Browser-Console: Fehlermeldungen?

DevTools Network-Tab:

Wurde Video geladen? (Status 200)
Dateigröße ok? (Nicht zu groß)
Content-Type richtig? (video/mp4)

Bild lädt nicht

// In Browser-Console testen
const img = new Image();
img.onload = () => console.log('Bild geladen!');
img.onerror = () => console.log('Fehler beim Laden!');
img.src = 'pfad/zum/bild.jpg';

Picture Element testet

Responsive Design Mode (F12):

Device Toolbar aktivieren
Verschiedene Bildschirmgrößen testen
Network-Tab: Welches Bild wird geladen?
Größe ändern → Wird anderes Bild geladen?

🎯

Zusammenfassung

Du hast gelernt:

✅ Videos mit <video> Tag einbinden
✅ Audio mit <audio> Tag einbinden
✅ Responsive Bilder mit <picture>
✅ Mehrere Formate für Browser-Kompatibilität
✅ Attribute wie controls, autoplay, loop
✅ Performance-Optimierung mit preload und loading="lazy"
✅ Accessibility mit Untertiteln und Alt-Texten

Key Takeaways:

MP4 für Videos, MP3 für Audio = beste Kompatibilität
Immer mehrere Quellen anbieten
Autoplay nur mit muted
Bilder und Videos komprimieren
Lazy Loading nutzen
Alt-Texte und Untertitel für Accessibility

Performance-Checklist:

[ ] Videos komprimiert (< 20 MB)
[ ] Bilder optimiert (< 500 KB)
[ ] Lazy Loading aktiviert
[ ] Moderne Formate (WebP, AVIF)
[ ] CDN genutzt
[ ] Responsive Images mit picture

Praktische Übungen

Übung 1: Video Player erstellen

Erstelle eine Video-Seite mit:

Video mit Controls
Poster-Bild
Mehrere Quellen (MP4 + WebM)
Lazy Loading

Übung 2: Audio Playlist

Erstelle eine Audio-Playlist mit:

3 Songs
Custom Play/Pause Buttons
Anzeige welcher Song spielt

Übung 3: Responsive Bildergalerie

Erstelle eine Galerie mit:

Picture-Element für verschiedene Größen
WebP mit JPG-Fallback
Lazy Loading
Alt-Texte

Übung 4: Video mit Untertiteln

Erstelle ein Video mit:

Deutschen Untertiteln (VTT-Datei)
Englischen Untertiteln
Transkript unterhalb des Videos

HTML5 Multimedia - Video, Audio & Picture

HTML5 Multimedia - Video, Audio & Picture

Das <video> Element

Einfaches Video einbinden

Video mit mehreren Quellen

Video-Attribute im Detail

Responsive Video

Das <audio> Element

Einfaches Audio einbinden

Audio mit mehreren Quellen

Audio-Attribute

Custom Audio Player

Das <picture> Element - Responsive Bilder

Basis Responsive Image

Moderne Bildformate mit Fallback

Art Direction - Verschiedene Bildausschnitte

Multimedia Best Practices

Performance-Optimierung

Accessibility für Multimedia

📝 Quiz

Tipps & Tricks

Video-Komprimierung

Bild-Optimierung

CDN für Multimedia

srcset und sizes

Häufige Fehler

Fehler 1: Autoplay mit Ton

Fehler 2: Keine Fallback-Formate

Fehler 3: Zu große Dateien

Fehler 4: Fehlende Alt-Texte

Debugging & Troubleshooting

Video spielt nicht

Bild lädt nicht

Picture Element testet

Zusammenfassung

Praktische Übungen

Übung 1: Video Player erstellen

Übung 2: Audio Playlist

Übung 3: Responsive Bildergalerie

Übung 4: Video mit Untertiteln

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

HTML Bilder - Das img-Tag richtig nutzen

Das <a> Element - Links und Navigation

Das <button> Element - Interaktive Schaltflächen

Das `<video>` Element

Das `<audio>` Element

Das `<picture>` Element - Responsive Bilder