mitmario.dev

<source>

Das <source>-Element gibt alternative Medienressourcen für <video>, <audio> und <picture> an. Statt eine einzige Datei zu verlinken, kannst du mit mehreren <source>-Elementen verschiedene Formate anbieten: der Browser wählt automatisch das erste, das er unterstützen kann. Das ist besonders wichtig bei Video und Audio, da nicht jeder Browser jedes Format und jeden Codec unterstützt.

Steckbrief <source>
Kategorie
Links & Medien
Art
Leeres Element
Attribute
5
Beispiele
3
Browser
5 von 5
E-Mail
0 von 5
Stand
03.02.2026

Grundlagen

Stell dir <source> als eine Speisekarte vor, die du dem Browser reichst: “Hier, du kannst WebM haben, oder MP4, oder OGG. Nimm das, was dir schmeckt.” Der Browser geht die Liste von oben nach unten durch und nimmt das erste Format, das er abspielen kann.

  • <source> ist ein Void-Element: Es hat keinen schließenden Tag und keinen Inhalt
  • Es wird immer als Kind von <video>, <audio> oder <picture> verwendet, niemals allein
  • Der Browser geht die <source>-Elemente von oben nach unten durch und wählt das erste unterstützte Format
  • Das type-Attribut hilft dem Browser, ohne Download zu entscheiden, ob er das Format unterstützt
  • In <picture> kann <source> auch media-Queries und srcset für responsive Bilder verwenden

Syntax

index.html
Grundsyntax
<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt kein Video.
</video>

Attribute

5 Attribute
Attribut und Beispiel Beschreibung
src URL
src="video.mp4"
Pfad zur Mediendatei. Wird in video und audio verwendet.
type String
type="video/webm"
MIME-Type der Mediendatei (z.B. video/mp4, audio/mpeg). Hilft dem Browser bei der Format-Erkennung.
media String
media="(min-width: 800px)"
Media-Query für responsive Bilder (nur in picture). Bestimmt, wann diese Quelle verwendet wird.
srcset String
srcset="bild-2x.jpg 2x"
Bildquellen mit Größenangaben (nur in picture). Wie beim img-Element.
sizes String
sizes="(max-width: 600px) 100vw, 50vw"
Größenhinweise für den Browser (nur in picture, zusammen mit srcset).

Beispiele

3 Beispiele

Der wichtigste Anwendungsfall: Verschiedene Videoformate als Fallback. WebM bietet bessere Kompression, aber MP4 ist das universelle Standardformat:

index.html
Video-Fallback
<video controls width="400">
  <!-- Bestes Format zuerst -->
  <source src="video.webm" type="video/webm">
  <!-- Universelles Fallback -->
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt kein Video.
</video>

Barrierefreiheit

Das <source>-Element selbst ist für Screenreader nicht sichtbar: es steuert nur, welche Mediendatei der Browser lädt. Die Barrierefreiheit hängt vom Eltern-Element ab: <video> und <audio> sollten Untertitel bzw. Transkripte haben, und <img> in <picture> braucht ein aussagekräftiges alt-Attribut.

Wichtig ist, dass die Fallback-Kette für alle Nutzer funktioniert: Wenn kein Format unterstützt wird, muss der Fallback-Text im Eltern-Element eine sinnvolle Alternative bieten. Bei Videos kann das ein Link zum Download sein, bei Bildern ein beschreibender Text.

Achte bei <picture> mit verschiedenen Bildgrößen darauf, dass das alt-Attribut auf dem <img>-Fallback steht und den Inhalt aller Bildvarianten korrekt beschreibt. Die verschiedenen <source>-Elemente liefern nur unterschiedliche Auflösungen oder Formate, der Inhalt bleibt derselbe.

Häufige Fehler

3 Fehler
01 Falsche Reihenfolge der <source>-Elemente
Der Browser nimmt das erste unterstützte Format. Wenn du MP4 vor WebM stellst, wird der Browser immer MP4 nehmen (da es universell unterstützt wird), und du verschenkst die bessere Kompression von WebM. Stelle das bevorzugte Format immer zuerst.
02 Fehlendes type-Attribut
Ohne type muss der Browser jede Datei teilweise herunterladen, um das Format zu erkennen. Das kostet unnötige Bandbreite und Zeit. Mit type kann der Browser sofort entscheiden, ob er das Format unterstützt, ohne die Datei anzufassen.
03 <source> ohne Eltern-Element
Ein <source> funktioniert nur innerhalb von <video>, <audio> oder <picture>. Allein im HTML platziert tut es nichts.

Browser-Kompatibilität

5 von 5

Das source-Element wird von allen modernen Browsern vollständig unterstützt. Die Verwendung in picture (mit media und srcset) funktioniert ebenfalls in allen aktuellen Browsern.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

0 von 5

Das source-Element hat in Email-Clients kaum Relevanz, da die Eltern-Elemente (video, audio, picture) selbst nur eingeschränkt oder gar nicht unterstützt werden.

  • Apple Mail

    Teilweise

    Funktioniert in video/audio bedingt. picture mit source wird unterstützt.

  • Gmail

    Keine

    Gmail entfernt video- und audio-Elemente samt ihren source-Kindern. picture wird nicht unterstützt.

  • Outlook

    Keine

    Outlook entfernt Media-Elemente komplett. Verwende einfache img-Tags statt picture/source.

  • Thunderbird

    Teilweise

    source funktioniert in video/audio-Elementen teilweise.

  • Yahoo Mail

    Keine

    Yahoo Mail entfernt Media-Elemente samt source aus dem HTML.

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.