HTML <source> etiketi

Tanım ve Kullanım

<source> etiketleri, medya öğeleri (örneğin <video>,<audio> ve <picture>）birden fazla medya kaynağını belirtmek için kullanılır.

<source> Etiket, yedek video/音频/图像 dosyalarını belirtmenize izin verir, tarayıcı, desteklediği ilk dosyayı seçer <source>.

Ayrıca bakınız:

HTML Eğitimleri:HTML Video

HTML Eğitimleri:HTML Ses

HTML DOM Referans Kılavuzu:Source nesnesi

Örnek

Örnek 1

Bu, iki audio dosyasına sahip bir audio oynatıcıdır. Tarayıcı, desteklediği ilk dosyayı seçer <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Tarayıcınız audio etiketi desteklemiyor.
</audio>

Kendi kendine deneyin

Örnek 2

<video> içinde kullanılır <source> Video oynatın:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Tarayıcınız video etiketi desteklemiyor.
</video>

Kendi kendine deneyin

Örnek 3

<picture> içinde kullanılır <source> Görüntü genişliğini gözüken genişliğe göre farklı görseller tanımlamak için kullanılır:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Kendi kendine deneyin

Özellik

Özellik Değer Açıklama
media Medya sorgusu Herhangi geçerli bir medya sorgusunu kabul eder, genellikle CSS'de tanımlanır.
sizes Farklı sayfa düzenleri için görsel boyutlarını belirtmek için kullanılır.
src URL

Medya dosyasının URL'sini belirlemek için kullanılır.

Audio ve video için <source> kullanıldığında bu özellik zorunludur.
srcset URL

Farklı durumlarda kullanılacak görsellerin URL'lerini belirlemek için kullanılır.

<source> <picture> kullanıldığında bu özellik zorunludur.
type MIME Türü Kaynağın MIME türünü tanımlar.

Genel Özellikler

<source> Bu etiketler ayrıca HTML'deki Genel Özellikler.

Olay Özellikleri

<source> Bu etiketler ayrıca HTML'deki Olay Özellikleri.

Öntanımlı CSS Ayarları

Yok.

Tarayıcı Desteği

Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5