HTML source Tag

Das HTML-Tag <source> gibt eine von mehreren alternativen Medienressourcen für ein <picture>-, <audio>- oder <video>-Element an. Es ist ein leeres (void) Element: Es hat keinen Inhalt und kein schließendes Tag.

Diese Seite erklärt, warum Sie <source> anstelle eines einzelnen src-Attributs verwenden sollten, wo es erlaubt ist und wie der Browser entscheidet, welche Quelle geladen wird.

Warum `<source>` statt einem einfachen `src` verwenden?

Ein einzelnes src-Attribut verweist auf genau eine Datei. Das <source>-Element ermöglicht es Ihnen, dem Browser eine Liste von Kandidaten anzubieten, damit dieser den besten auswählen kann, den er tatsächlich unterstützt. Der Browser liest die <source>-Kindelemente der Reihe nach und verwendet das erste, das er abspielen oder anzeigen kann — alle weiteren werden ignoriert.

Damit werden zwei reale Probleme gelöst:

Format-Fallbacks für <video> und <audio>. Kein einzelnes Video- oder Audioformat wird von jedem Browser unterstützt. Indem mehrere Kodierungen aufgelistet werden (zum Beispiel WebM und MP4), spielt jeder Browser das erste Format ab, das er versteht.
Responsive und art-directed Bilder für <picture>. Mit den Attributen media und srcset können Sie je nach viewport-Größe oder Anzeigeauflösung ein anderes Bild — oder ein anders zugeschnittenes — ausliefern.

Das <source>-Element ist eines der HTML5-Elemente und kann mehrfach innerhalb eines einzelnen übergeordneten Elements erscheinen, um die verfügbaren Alternativen aufzulisten.

Gefahr

Wenn das <source>-Tag in den Tags <audio> oder <video> enthalten ist, muss es vor dem <track>-Tag und nach den Mediendateien platziert werden. Es muss vor <img> platziert werden, wenn es sich innerhalb eines <picture>-Tags befindet.

Syntax

Das <source>-Tag ist leer, das heißt, das schließende Tag ist nicht erforderlich. In XHTML muss das Tag (<source>) jedoch geschlossen werden (<source/>).

Beispiel: `<source>` innerhalb eines `<picture>`-Elements

Beachten Sie, dass <source> kein alt-Attribut besitzt. Der Alternativtext gehört immer zum Fallback-<img>-Element, das auch von älteren Browsern angezeigt wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs logo" style="width:auto;" />
    </picture>
    <p>The browser loads the first <source> whose media query matches. If none match, it falls back to the <img> element.</p>
  </body>
</html>

Probier es selbst »

Beispiel: `<source>` innerhalb eines `<video>`-Elements

Hier versucht der Browser zunächst die WebM-Datei; wenn er WebM nicht abspielen kann, fällt er auf die MP4-Datei zurück. Das type-Attribut ermöglicht es dem Browser, ein nicht unterstütztes Format zu überspringen, ohne es herunterzuladen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>

Probier es selbst »

Beispiel: `<source>` innerhalb eines `<audio>`-Elements

Dieselbe Format-Fallback-Logik gilt für Audio. Der Browser spielt die erste Kodierung ab, die er unterstützt; der Text nach den Quellen wird nur angezeigt, wenn <audio> überhaupt nicht unterstützt wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg" />
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <p>Some information about the audio.</p>
  </body>
</html>

Attribute

Attribut	Wert	Beschreibung
`media`	CSS-Media-Query, z. B. `(min-width: 768px)`	Nur für `<picture>`. Der Browser verwendet diese Quelle, wenn die Media-Query zutrifft.
`sizes`	Eine oder mehrere Größen, z. B. `(max-width: 600px) 480px, 800px`	Nur für `<picture>`. Beschreibt, wie breit das Bild angezeigt wird, damit der Browser den richtigen Kandidaten aus `srcset` auswählen kann.
`src`	URL	Die Adresse der Mediendatei. Wird innerhalb von `<audio>` und `<video>` verwendet.
`srcset`	URL oder kommagetrennte URL-Liste mit Breiten-/Dichte-Deskriptoren	Nur für `<picture>`. Listet Bildkandidaten für verschiedene Bildschirmauflösungen oder -größen auf.
`type`	Ein MIME-Typ, z. B. `video/webm`, `video/mp4`, `audio/ogg`, `audio/mpeg`, `image/webp`	Der MIME-Typ der Ressource. Ermöglicht es dem Browser, nicht unterstützte Formate zu überspringen.

Das <source>-Tag unterstützt außerdem die Global Attributes und die Event Attributes.

Übungen

Übung

Wenn ein Browser mehrere source-Elemente innerhalb eines video-Elements antrifft, welches verwendet er?

Das erste source-Element, dessen Format der Browser unterstützt; die übrigen werden ignoriert.Das letzte aufgelistete source-Element, da es die früheren überschreibt.Alle gleichzeitig, nacheinander abgespielt.Ein zufällig aus der Liste gewähltes source-Element.

Warum <source> statt einem einfachen src verwenden?