<source> HTML-Medien- oder Bildquellenelement

Probieren Sie es aus

<video controls width="250" height="200" muted>
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  Download the
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

Attribute

Dieses Element unterstützt alle globalen Attribute. Zusätzlich können folgende Attribute verwendet werden:

type

Gibt den MIME-Medientyp des Bildes oder einen anderen Medientyp an, optional einschließlich eines codecs-Parameters.

src

Gibt die URL der Medienressource an. Erforderlich, wenn das Elternelement von <source> <audio> oder <video> ist. Nicht zulässig, wenn das Elternelement <picture> ist.

srcset

Gibt eine durch Kommas getrennte Liste von einem oder mehreren Bild-URLs und deren Beschreibungen an. Erforderlich, wenn das Elternelement von <source> <picture> ist. Nicht zulässig, wenn das Elternelement <audio> oder <video> ist.

Die Liste besteht aus durch Kommas getrennten Zeichenfolgen, die eine Reihe möglicher Bilder angeben, die der Browser verwenden kann. Jede Zeichenfolge besteht aus:

• Einer URL, die einen Bildstandort angibt.
• Einer optionalen Breitenbeschreibung — eine positive ganze Zahl, direkt gefolgt von "w", wie 300w.
• Einer optionalen Pixeldichtebeschreibung — eine positive Fließkommazahl, direkt gefolgt von "x", wie 2x.

Jede Zeichenfolge in der Liste muss entweder eine Breitenbeschreibung oder eine Pixeldichtebeschreibung haben, um gültig zu sein. Diese beiden Beschreibungen sollten nicht zusammen verwendet werden; es sollte nur eine konsistent in der gesamten Liste verwendet werden. Der Wert jeder Beschreibung in der Liste muss eindeutig sein. Der Browser wählt das am besten geeignete Bild zur Anzeige zu einem bestimmten Zeitpunkt basierend auf diesen Beschreibungen. Wenn keine Beschreibungen angegeben sind, wird der Standardwert 1x verwendet. Wenn das sizes-Attribut ebenfalls vorhanden ist, muss jede Zeichenfolge eine Breitenbeschreibung enthalten. Wenn der Browser srcset nicht unterstützt, wird src als Standardbildquelle verwendet.

sizes

Gibt eine Liste von Quellgrößen an, die die endgültige gerenderte Breite des Bildes beschreiben. Zulässig, wenn das Elternelement von <source> <picture> ist. Nicht zulässig, wenn das Elternelement <audio> oder <video> ist.

Die Liste besteht aus Quellgrößen, die durch Kommas getrennt sind. Jede Quellgröße ist ein Paar aus Medienbedingung und Länge. Bevor die Seite aufgebaut wird, verwendet der Browser diese Informationen, um zu bestimmen, welches Bild in srcset angezeigt werden soll. Beachten Sie, dass sizes nur dann Auswirkungen hat, wenn Breitenbeschreibungen mit srcset bereitgestellt werden, nicht Pixeldichtebeschreibungen (d.h. 200w sollte anstelle von 2x verwendet werden).

media

Gibt die Medienabfrage für das beabsichtigte Medium der Ressource an.

height

Gibt die intrinsische Höhe des Bildes in Pixeln an. Zulässig, wenn das Elternelement von <source> ein <picture> ist. Nicht zulässig, wenn das Elternelement <audio> oder <video> ist.

Der Höhenwert muss eine ganze Zahl ohne Einheiten sein.

width

Gibt die intrinsische Breite des Bildes in Pixeln an. Zulässig, wenn das Elternelement von <source> ein <picture> ist. Nicht zulässig, wenn das Elternelement <audio> oder <video> ist.

Der Breitenwert muss eine ganze Zahl ohne Einheiten sein.

Nutzungshinweise

Das <source>-Element ist ein void-Element, was bedeutet, dass es nicht nur keinen Inhalt hat, sondern auch keinen abschließenden Tag hat. Das heißt, Sie verwenden niemals </source> in Ihrem HTML.

Der Browser geht eine Liste von <source>-Elementen durch, um ein Format zu finden, das er unterstützen kann. Er verwendet das erste, das er anzeigen kann. Für jedes <source>-Element:

• Wenn das type-Attribut nicht angegeben ist, ruft der Browser den Medientyp vom Server ab und bestimmt, ob es angezeigt werden kann. Wenn das Medium nicht wiedergegeben werden kann, überprüft der Browser das nächste <source> in der Liste.
• Wenn das type-Attribut angegeben ist, vergleicht der Browser es sofort mit den Medientypen, die er anzeigen kann. Wenn der Typ nicht unterstützt wird, überspringt der Browser die Abfrage des Servers und überprüft direkt das nächste <source>-Element.

Wenn keines der <source>-Elemente eine nutzbare Quelle bereitstellt:

• Im Fall eines <picture>-Elements verwendet der Browser das Bild, das im <picture>-Element im <img>-Kind angegeben ist.
• Im Fall eines <audio>- oder <video>-Elements zeigt der Browser den Inhalt an, der zwischen den öffnenden und schließenden Tags des Elements enthalten ist.

Für Informationen über Bildformate, die von Webbrowsern unterstützt werden, und zur Auswahl geeigneter Formate, lesen Sie unseren Leitfaden zu Bilddateitypen und -formaten. Für Details zu den Video- und Audiotoptypen, die Sie verwenden können, siehe den Leitfaden zu Medientypen und -formaten.

Beispiele

Verwenden des type-Attributs mit <video>

Dieses Beispiel zeigt, wie man ein Video in verschiedenen Formaten anbietet: WebM für Browser, die es unterstützen, Ogg für diejenigen, die Ogg unterstützen, und QuickTime für Browser, die QuickTime unterstützen. Wenn das <audio>- oder <video>-Element vom Browser nicht unterstützt wird, wird stattdessen ein Hinweis angezeigt. Wenn der Browser das Element unterstützt, jedoch keines der angegebenen Formate, wird ein error-Ereignis am <audio>- oder <video>-Element ausgelöst, und die standardmäßigen Mediensteuerelemente (falls aktiviert) zeigen einen Fehler an. Für weitere Details, welche Mediendateiformate zu verwenden sind und deren Browserunterstützung, siehe unseren Leitfaden zu Medientypen und -formaten.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Verwenden des media-Attributs mit <video>

Dieses Beispiel zeigt, wie eine alternative Quelldatei für Viewports über einer bestimmten Breite angeboten wird. Wenn die Browsing-Umgebung eines Benutzers die angegebene media-Bedingung erfüllt, wird das zugehörige <source>-Element ausgewählt. Der Inhalt seines src-Attributs wird dann angefordert und dargestellt. Wenn die media-Bedingung nicht übereinstimmt, geht der Browser zum nächsten <source> in der Liste über. Die zweite <source>-Option im untenstehenden Code hat keine media-Bedingung, daher wird sie für alle anderen Browsing-Kontexte ausgewählt.

<video controls>
  <source src="foo-large.webm" media="(width >= 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Für weitere Beispiele ist der Artikel HTML-Video und -Audio im Lernbereich eine großartige Ressource.

Verwenden des media-Attributs mit <picture>

In diesem Beispiel sind zwei <source>-Elemente innerhalb von <picture> enthalten, die Versionen eines Bildes bieten, das verwendet wird, wenn der verfügbare Platz bestimmte Breiten überschreitet. Wenn die verfügbare Breite kleiner als die kleinste dieser Breiten ist, wird der Browser auf das im <img>-Element angegebene Bild zurückgreifen.

<picture>
  <source srcset="mdn-logo-wide.png" media="(width >= 800px)" />
  <source srcset="mdn-logo-medium.png" media="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

Mit dem <picture>-Element müssen Sie immer ein <img> mit einem Ersatzbild einfügen. Stellen Sie zudem sicher, dass Sie ein alt-Attribut für die Barrierefreiheit hinzufügen, es sei denn, das Bild ist rein dekorativ und für den Inhalt irrelevant.

Verwenden der height- und width-Attribute mit <picture>

In diesem Beispiel sind drei <source>-Elemente mit height- und width-Attributen in einem <picture>-Element enthalten. Eine Medienabfrage ermöglicht es dem Browser, ein Bild zur Anzeige mit den height- und width-Attributen basierend auf der Viewport-Größe auszuwählen.

<picture>
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <audio> Element
• <picture> Element
• <video> Element
• Leitfaden zu Bilddateitypen und -formaten
• Leitfaden zu Medientypen und -formaten
• Web-Performance