HTML <bron> Merker
Voorbeeld
'n Oudiospeler met twee bronlêers. Die blaaier sal die eerste <bron> kies wat dit ondersteun:
<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>
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die <source>merker word gebruik om veelvuldige mediabronne vir media-elemente te spesifiseer, soos
<video> , <klank> en <prent> .
Die <source>merker laat jou toe om alternatiewe video-/klank-/beeldlêers te spesifiseer waaruit die blaaier kan kies, gebaseer op blaaierondersteuning of kykpoortwydte. Die blaaier sal die eerste kies <source>
wat dit ondersteun.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die element ten volle ondersteun.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Eienskappe
| 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 eienskappe
Die <source>merker ondersteun ook die Global Attributes in HTML .
Gebeurtenis eienskappe
Die <source>merker ondersteun ook die gebeurteniskenmerke in HTML .
Meer voorbeelde
Voorbeeld
Gebruik <bron> binne <video> om 'n video te speel:
<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>
Voorbeeld
Gebruik <bron> binne <prent> om verskillende beelde te definieer op grond van die kykpoortwydte:
<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>
Verwante bladsye
HTML-tutoriaal: HTML-video
HTML-tutoriaal: HTML-klank
HTML DOM verwysing: Bronvoorwerp
Verstek CSS-instellings
Geen.