HTML Audio und Video

Podcasts, Tutorials, Hintergrundmusik – HTML Audio und Video macht's möglich! Mit den HTML5-Elementen bindest du Multimedia direkt ein, ganz ohne Flash oder Plugins. Los geht's!

Einführung in das HTML Audio und Video Tutorial

Was du in diesem Tutorial lernst

• <audio> und <video> Elemente verstehen
• Die wichtigsten Attribute: controls, autoplay, loop
• Fallbacks für verschiedene Browser
• Barrierefreie Multimedia-Inhalte

Warum HTML5 Audio und Video wichtig sind

• Kein Flash mehr nötig: Native Browser-Unterstützung
• Mobile-freundlich: Funktioniert auf allen Geräten
• Volle Kontrolle: CSS und JavaScript für eigene Player

Voraussetzungen

Benötigte HTML-Kenntnisse

Du solltest HTML-Grundlagen verstehen. Falls nicht, hol das kurz nach!

Dateiformate im Überblick

• Audio: MP3 (überall), OGG, WAV
• Video: MP4/H.264 (überall), WebM, OGV

Schritt-für-Schritt-Anleitung

Schritt 1: Audio-Element einbinden

<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    Dein Browser unterstützt kein Audio.
</audio>

• controls: Zeigt Play/Pause, Lautstärke etc.
• <source>: Definiert die Audiodatei
• Text zwischen Tags: Fallback für alte Browser

Schritt 2: Video-Element

<video controls width="640" height="360">
    <source src="tutorial.mp4" type="video/mp4">
    Dein Browser unterstützt kein Video.
</video>

• width/height: Größe in Pixeln
• Tipp: Seitenverhältnis beibehalten (z.B. 16:9)

Schritt 3: Mehrere Formate für Kompatibilität

<video controls width="800" height="450" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="subtitles" src="untertitel.vtt" srclang="de" label="Deutsch">
</video>

• Browser wählt erstes unterstütztes Format
• poster: Vorschaubild vor dem Start
• <track>: Untertitel für Barrierefreiheit!

Schritt 4: Autoplay und Loop

<!-- Autoplay funktioniert NUR mit muted! -->
<video autoplay muted loop width="400">
    <source src="intro-animation.mp4" type="video/mp4">
</video>

<!-- Hintergrundmusik (stummgeschaltet) -->
<audio autoplay muted loop>
    <source src="ambient.mp3" type="audio/mpeg">
</audio>

Wichtig: Browser blockieren Autoplay MIT Ton! muted ist Pflicht.

[bildapi id="1" prompt="A computer screen showing an HTML video element with a poster image thumbnail, clean modern web design, programming tutorial style" name="html-video-poster-example" alt="HTML Video Element mit Poster-Bild Beispiel"]

Code-Beispiele zu HTML Audio und Video

Podcast-Player

<audio controls preload="metadata">
    <source src="podcast-episode-42.mp3" type="audio/mpeg">
    <source src="podcast-episode-42.ogg" type="audio/ogg">
    <p>Audio nicht unterstützt. <a href="podcast.mp3">Hier downloaden</a>.</p>
</audio>

preload="metadata": Lädt nur Infos (Länge), nicht die ganze Datei.

Video mit Untertiteln

<video controls width="800">
    <source src="erklaervideo.mp4" type="video/mp4">
    <track kind="subtitles" src="subs-de.vtt" srclang="de" label="Deutsch" default>
    <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English">
</video>

Häufige Fehler & Troubleshooting

Fehler 1: Falscher Dateipfad

Prüfe: Liegt die Datei wirklich dort? Browser-Konsole (F12) zeigt 404-Fehler!

Fehler 2: Falscher MIME-Type

FALSCH: type="video/mpeg"  (für .mp4)
RICHTIG: type="video/mp4"

Fehler 3: Autoplay funktioniert nicht

Browser blockieren Autoplay mit Ton! Lösung:

• autoplay muted verwenden
• Oder: Nutzer muss erst klicken

HTML: Best Practices & Tipps

Barrierefreiheit

• Untertitel mit <track> anbieten
• Fallback-Text für Screenreader
• Transkripte für Audio-Inhalte

Performance

• preload="none" für Videos die nicht sofort abgespielt werden
• Videos komprimieren (HandBrake ist kostenlos)
• Für lange Videos: Streaming-Dienste nutzen (YouTube, Vimeo)

SEO

• Beschreibender Text um das Video
• Video-Sitemap für Google
• Transkripte als Text-Content

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kannst jetzt Multimedia einbinden:

• <audio> für Podcasts, Musik, Sprachaufnahmen
• <video> für Videos aller Art
• controls, autoplay, muted, loop als wichtigste Attribute
• Mehrere <source> für Browserkompatibilität

HTML5-Multimedia funktioniert überall – ohne Plugins!

Bereit für mehr? Lerne als Nächstes, wie du HTML Iframes für YouTube, Maps und mehr einbindest!