Das Tag <source> bestimmt einige multimediale Dateien in verschiedenen Formaten wie Audio und Video. Es ist für die Eigenschaft Cross-Browser notwendig: Der Browser kann aus zugänglichen Varianten das Format, das er unterstützt und ohne Probleme Audio- oder Videodateien abspielt, wählen.
In einem Dokument kann das Element <source> mehrmals für die Eingabe von alternativen Audio- und Videodateinen und die Eingabe von einigen Formaten verwendet werden.
Wenn das Tag <source> in den Tags <audio> oder <video> eingeschlossen ist, muss das Element vor dem Tag <track> und nach den multimedialen Dateien platziert weden. Im Element <picture> muss es vor dem Tag <img> platziert werden.
Syntax
Das Tag <source> wird ungepaart verwendet, kein Endtag ist notwendig.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
</picture>
<p>Lorem Ipsum ist ein reiner Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker eine Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert geblieben ist.</p>
</body>
</html>Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Information über Video</p>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| media | media_query | Es bezeichnet, dass die Datei für bestimmte Geräte angepasst ist. |
| sizes | Es bezeichnet die erlaubte relative Größe der Quelle. Eingefügt in HTML5. |
|
| src | URL | Es bezeichnet die URL-Adresse der Mediadatei. |
| srcset | URL | Es bestimmt die Bilder, die in verschiedenen Situationen (für verschiede Geräte) verwendet werden.
Eingefügt in HTML5. |
| type |
Wert für Video:
video/ogg
video/mp4
video/webm Wert für Audio: audio/ogg audio/mpeg |
Es bestimmt den MIME-Typ der Mediaquelle. |
Das Tag <source> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|---|---|---|---|
| 4+ | 3.5+ | 4+ | 10.5+ |
Übe dein Wissen
Was ist die Funktion des HTML-Tags <source>?
Richtig!
Falsch!