HTML <source> Tag

Definition und Verwendung

<source> Die Tags <audio> und <video> werden verwendet, um Medienelemente (wie <video>,<audio> und <picture>）Mehrere Mediendateien angeben.

<source> Der Tag ermöglicht es Ihnen, alternative Video/Audio/Bild-Dateien zu spezifizieren, die der Browser basierend auf der Unterstützung des Browsers oder der Breite des Viewports auswählen kann. Der Browser wählt den ersten, den er unterstützt. <source>.

Siehe auch:

HTML-Tutorial:HTML Video

HTML-Tutorial:HTML Audio

HTML DOM Referenzhandbuch:Source-Objekt

Beispiel

Beispiel 1

Dies ist ein Audio-Player mit zwei Audiosourcen. Der Browser wählt den ersten, den er unterstützt. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Ihr Browser unterstützt das Audio-Tag nicht.
</audio>

Probieren Sie es selbst aus

Beispiel 2

Verwenden Sie es im <video>-Tag <source> Video abspielen:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

Probieren Sie es selbst aus

Beispiel 3

Verwenden Sie es im <picture>-Tag <source> Um verschiedene Bilder basierend auf der Breite des Viewports zu definieren:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Blumen" style="width:auto;">
</picture>

Probieren Sie es selbst aus

Attribut

Attribut Wert Beschreibung
media Medienabfrage Akzeptiert jede gültige Medienabfrage, die normalerweise in CSS definiert wird.
sizes Bestimmt die Bildgröße für verschiedene Seitenausrichtungen.
src URL

Verwendet, um die URL der Mediendatei zu spezifizieren.

Wenn <source> für <audio> und <video> verwendet wird, ist dieses Attribut obligatorisch.
srcset URL

Used to specify the URL of the image to be used in different situations.

This attribute is required when <source> is used with <picture>.
type MIME Type Specifies the MIME type of the resource.

Global Attributes

<source> The tag also supports Global Attributes in HTML.

Event Attributes

<source> The tag also supports Event Attributes in HTML.

Default CSS Settings

None.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5