Alternatif kaynaklar

<source> ve type özniteliğiyle farklı medya biçimleri sağlarsın.

source öğesi

Farklı tarayıcılar farklı medya biçimlerini destekler. Tek bir src yazarsan bazı kullanıcılar videoyu açamaz. Çözüm: <source> öğesiyle birden çok kaynak sunmaktır.

audio ya da video içine art arda source öğeleri koyulur. Tarayıcı listeden ilk desteklediği kaynağı seçer, gerisini atlar. Bu yüzden daha verimli biçimi (genelde webm) başta, daha uyumlu yedeği (mp4) sonra yazmak iyi bir alışkanlıktır.

type özniteliği

Her <source> öğesine type özniteliği yazmak tarayıcıya yardım eder. type, dosyanın biçimini MIME tipiyle söyler: type="video/mp4" ya da type="audio/ogg" gibi.

type olmadan tarayıcı dosyayı indirip bakarak anlamaya çalışır; type yazarsan gereksiz indirmeyi atlar ve daha hızlı karar verir. Bu yüzden her source'a type eklemek iyi bir uygulamadır.

Uygulama Çok kaynaklı video ekle

Body içindeki <video> zaten controls ile duruyor. İçine en az iki <source> öğesi koy; her birine src ve type yaz.

Örnek çözümü göster

<body>
  <video controls>
    <source src="https://example.com/film/fragman.mp4" type="video/mp4">
    <source src="https://example.com/film/fragman.webm" type="video/webm">
  </video>
</body>

Kendini test et

Birden çok source öğesi neden kullanılır?
- Videoyu daha hızlı yüklemek için
- Farklı tarayıcıların desteklediği biçimleri karşılamak için
- Altyazı eklemek için
- Videoyu otomatik oynatmak için
Cevabı göster

Farklı tarayıcıların desteklediği biçimleri karşılamak için — Doğru. source ile birden çok biçim sunulur; tarayıcı desteklediğini seçer.

source öğesine type değerini yaz

<source src="https://example.com/film/fragman.mp4" type="____">

Cevabı göster

<source src="https://example.com/film/fragman.mp4" type="video/mp4">

Biçim ve MIME eşleştir

video/mp4

MP4 video
video/webm

WebM video
audio/mpeg

MP3 ses
audio/ogg

Ogg ses

Sıradaki ders: Özet - Medya galerisi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler