0Pricing
HTML Academy · Ders

Birden Çok Biçim için source Öğesi

source öğesiyle yedek biçimler sağlayın

Birden Çok Biçim için source Öğesi, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Neden Birden Çok Biçim?

Farklı tarayıcılar farklı ses/video kodlayıcılarını destekler:

  • WebM (VP9/VP8) — Chrome, Firefox, Edge (Safari değil)
  • MP4 (H.264) — tüm tarayıcılar (evrensel)
  • OGG — Firefox, Chrome (Safari değil)
  • OPUS — Chrome, Firefox, Edge (Safari değil)

<source> öğesi, geri dönüş için birden çok biçim sağlamanıza olanak tanır.

Ses İçinde Kaynak

Birden çok ses biçimi sağlayın:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

Video İçinde Kaynak

Birden çok video biçimi sağlayın:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

Kaynak Üzerindeki Tür Özniteliği

type özniteliği, tarayıcıya MIME türünü ve kodlayıcıyı bildirir:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Kaynak Seçimi Nasıl Çalışır

Tarayıcı, kaynak öğelerini sırayla değerlendirir:

  1. İlk kaynağın type değerini okur
  2. Bu türü oynatabiliyorsa onu indirir ve kullanır
  3. Oynatamıyorsa sonraki kaynağa geçer
  4. Hiçbir kaynak çalışmazsa geri dönüş içeriğini gösterir

En çok tercih edilen biçimi ilk sıraya koyun (örneğin Chrome/Firefox performansı için WebM).

Kaynak Üzerindeki Medya Özniteliği

media özniteliği, farklı görüntü alanları için farklı biçimler sunmanıza olanak tanır:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Önerilen Biçim Sırası

En yüksek uyumluluk ve performans için en uygun kaynak sırası:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Ses Biçimi Önerileri

Ses kodlayıcısı önerileri:

  • WebM içinde OPUS — en iyi kalite/boyut oranı; Chrome, Firefox, Edge
  • MP4 içinde AAC — evrensel; Safari, Chrome, Firefox, Edge
  • MP3 — en geniş uyumluluk; son geri dönüş seçeneği olarak kullanın

srcset ile Duyarlı Video

Video için bant genişliğine uyarlama amacıyla kaynak üzerinde media kullanın:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

canPlayType Denetimi

Tarayıcının kodlayıcı desteğini JavaScript ile sınayın:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Geri Dönüş İçeriği

Ses/video içinde her zaman geri dönüş içeriği bulundurun:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Hızlı Kontrol

Kaynak öğelerini hangi sırayla listelemelisiniz?

Özet: Kaynak Öğesi

Kaynak öğesinin temel noktaları:

  • Ses/video içindeki <source src type>, biçim seçenekleri sağlar
  • Tarayıcı eşleşen ilk kaynağı seçer
  • En modern biçimi ilk sıraya koyun; MP4/AAC evrensel geri dönüş seçeneğidir
  • Tüm kaynaklardan sonra ses/video içinde geri dönüş metni/bağlantısı bulundurun
  • Görüntü alanına göre video seçimi için kaynak üzerinde media kullanın

Sıkça Sorulan Sorular

“Birden Çok Biçim için source Öğesi” dersi ücretsiz mi?

Evet — “Birden Çok Biçim için source Öğesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Birden Çok Biçim için source Öğesi” dersinde ne öğreneceğim?

source öğesiyle yedek biçimler sağlayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Birden Çok Biçim için source Öğesi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. audio Öğesi: src controls loop autoplay
  2. video Öğesi ve En-Boy Oranı
  3. Birden Çok Biçim için source Öğesi
  4. track ve WebVTT ile Altyazılar
← HTML Academy Sayfasına Dön