HTML tag <source>
Příklad
Audio přehrávač se dvěma zdrojovými soubory. Prohlížeč vybere první <zdroj>, který podporuje:
<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>
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Značka <source>se používá k určení více mediálních zdrojů pro mediální prvky, jako jsou
<video> , <audio> a <picture> .
Tag <source>umožňuje specifikovat alternativní video/audio/obrázkové soubory, ze kterých si může prohlížeč vybrat, na základě podpory prohlížeče nebo šířky zobrazované oblasti. Prohlížeč vybere první <source>
, kterou podporuje.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která prvek plně podporuje.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Atributy
| 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 |
Globální atributy
Značka <source>také podporuje globální atributy v HTML .
Atributy události
Značka <source>také podporuje atributy událostí v HTML .
Další příklady
Příklad
K přehrání videa použijte <source> v <video>:
<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>
Příklad
Použijte <zdroj> v <obrázku> k definování různých obrázků na základě šířky výřezu:
<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>
Související stránky
HTML výukový program: HTML video
HTML tutoriál: HTML Audio
Odkaz HTML DOM: Zdrojový objekt
Výchozí nastavení CSS
Žádný.