HTML <kaynak> Etiketi
Örnek
İki kaynak dosyaya sahip bir ses çalar. Tarayıcı, desteklediği ilk <kaynağı> seçecektir:
<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>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
etiketi, <video> , <audio> ve <picture> gibi <source>medya öğeleri için birden çok medya kaynağı belirtmek için kullanılır
.
Etiket <source>, tarayıcı desteğine veya görüntü alanı genişliğine bağlı olarak tarayıcının seçebileceği alternatif video/ses/görüntü dosyaları belirlemenize olanak tanır. Tarayıcı ilk <source>
desteklediğini seçecektir.
Tarayıcı Desteği
Tablodaki sayılar, öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Öznitellikler
| 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 |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<source> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<source> de destekler .
Daha fazla örnek
Örnek
Bir videoyu oynatmak için <video> içinde <source> kullanın:
<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>
Örnek
Görünüm alanı genişliğine göre farklı görüntüler tanımlamak için <picture> içindeki <source> öğesini kullanın:
<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>
İlgili Sayfalar
HTML eğitimi: HTML Videosu
HTML eğitimi: HTML Ses
HTML DOM referansı: Kaynak Nesne
Varsayılan CSS Ayarları
Hiçbiri.