HTML <source>-Element
Das <source>-Tag ist ein leeres Element. Das bedeutet, dass das Tag keinen Inhalt sowie kein schließendes Tag besitzt.
Das <source>-Tag ist eines der HTML5-Elemente. Es wird verwendet, um mehrere Medienressourcen in verschiedenen Formaten zu definieren: Video, Audio oder Bild. Dies ist notwendig, um die bestmögliche browserübergreifende Kompatibilität zu erreichen. Der Browser kann aus den verfügbaren Optionen das Format auswählen, das er unterstützt, und Audio- und Videodateien ohne Probleme abspielen.
Das <source>-Element kann in einem Dokument mehrmals verwendet werden, um alternative Audio-/Videodateien und Bilder in zahlreichen Formaten anzugeben.
DANGER
Wenn das <source>-Tag in die Tags <audio> oder <video> eingebettet ist, sollte es vor dem Tag <track> und nach den Mediendateien platziert werden. Es sollte vor <img> platziert werden, wenn es sich innerhalb eines <picture>-Tags befindet.
Syntax
Das <source>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. In XHTML muss das Tag jedoch geschlossen werden (<source/>).
Beispiel für das HTML <source>-Tag:
Beispiel für das HTML <source>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://de.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
<source media="(min-width: 430px)" alt="img_2" srcset="https://de.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
<img src="https://de.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
</picture>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Beispiel für das HTML <source>-Tag mit den Attributen src und type:
Videoquelle|Beispiel|W3Docs.
<!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="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg />
<source src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type=video/mp4 />
</video>
<p>Some information about video</p>
</body>
</html>Attribute
| Attribute | Wert | Beschreibung |
|---|---|---|
| media | media_query | Gibt an, dass die Datei an bestimmte Gerätetypen angepasst ist. |
| sizes | Gibt die relative akzeptable Größe der Quelle an. Hinzugefügt in HTML5. | |
| src | URL | Gibt die URL-Adresse der Mediendatei an. |
| srcset | URL | Gibt Bilder an, die in verschiedenen Situationen verwendet werden (für iPad-Bildschirme, für Retina-Bildschirme usw.). Hinzugefügt in HTML5. |
| type | Wert für Video: video/oggvideo/mp4video/webm Wert für Audio: audio/ogg audio/mpeg | Gibt den MIME-Typ der Medienquelle an. |
Das <source>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.
Praxis
Welche der folgenden Optionen stellt die Verwendung des HTML <source>-Tags korrekt dar?