HTML- <source> -Tag
Beispiel
Ein Audioplayer mit zwei Quelldateien. Der Browser wählt die erste <Quelle>, die er unterstützt:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das <source>Tag wird verwendet, um mehrere Medienressourcen für Medienelemente wie
<video> , <audio> und <picture> anzugeben .
Mit dem <source>Tag können Sie alternative Video-/Audio-/Bilddateien angeben, aus denen der Browser basierend auf der Browserunterstützung oder der Breite des Anzeigebereichs auswählen kann. Der Browser wählt die erste, die <source>
er unterstützt.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Attribute
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Globale Attribute
Das <source>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <source>Tag unterstützt auch die Ereignisattribute in HTML .
Mehr Beispiele
Beispiel
Verwenden Sie <source> innerhalb von <video>, um ein Video abzuspielen:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Beispiel
Verwenden Sie <source> innerhalb von <picture>, um verschiedene Bilder basierend auf der Breite des Ansichtsfensters zu definieren:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Verwandte Seiten
HTML-Tutorial: HTML-Video
HTML-Tutorial: HTML-Audio
HTML-DOM-Referenz: Quellobjekt
Standard-CSS-Einstellungen
Keiner.