<source>

Zuletzt aktualisiert am 3. Februar 2026

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.

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

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

Attribute

Beispiele

Video mit Format-Fallbacks

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

<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>

Audio mit Format-Fallbacks

Dasselbe Prinzip funktioniert bei Audio. MP3 wird überall unterstützt, OGG Vorbis bietet gute Qualität bei kleiner Dateigröße:

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

Responsive Bilder mit <picture>

In <picture> funktioniert <source> anders: Hier kannst du mit media-Queries verschiedene Bilder für verschiedene Bildschirmgrößen bereitstellen, oder moderne Bildformate mit Fallback:

<picture>
  <!-- Desktop: breites Bild -->
  <source srcset="bild-desktop.webp"
          media="(min-width: 800px)"
          type="image/webp">
  <!-- Mobil: quadratisches Bild -->
  <source srcset="bild-mobil.webp"
          media="(max-width: 799px)"
          type="image/webp">
  <!-- Fallback für alle -->
  <img src="bild-fallback.jpg" alt="Beispielbild">
</picture>

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

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.

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.

<source> ohne Eltern-Element: Ein <source> funktioniert nur innerhalb von <video>, <audio> oder <picture>. Allein im HTML platziert tut es nichts.

Browser-Kompatibilität

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.

Email-Kompatibilität

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.

Verwandte Elemente