CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Meydan okuma - Erişilebilir video

HTML kursu · İleri seviye · Ders 53/56

Altyazılı, poster'li ve preload kontrollü bir video yazarsın.

Erişilebilir video meydan okuması

Bu meydan okuma, erişilebilir videoyu tüm yönleriyle yoklar: <video> kabı, <source> ile format seçimi, <track> ile altyazı, poster ile ön kare, preload ile yükleme denetimi.

Şunları içeren bir video oynatıcı kurman istenecek: controls ile kullanıcı düğmeleri, iki <source> (mp4 ve webm), bir <track kind="captions"> Türkçe altyazı için (srclang ve label ile), bir poster görseli ve preload="metadata" ayarı. <video> içine bir <p> yedek metni de ekle.

Uygulama Erişilebilir video oynatıcıyı yaz

Body içine bir <video> ekle. controls, preload="metadata", poster="/medya/on-kare.jpg" özniteliklerini ver. İçine iki <source> koy: biri src="/medya/tanitim.mp4" type="video/mp4", diğeri src="/medya/tanitim.webm" type="video/webm". Ardından bir <track kind="captions" srclang="tr" label="Türkçe" src="/medya/altyazi-tr.vtt"> ekle. En son bir <p> yedek metni koy: 'Tarayıcın videoyu oynatamıyor.'

Örnek çözümü göster 
<body>
  <video controls preload="metadata" poster="/medya/on-kare.jpg">
    <source src="/medya/tanitim.mp4" type="video/mp4">
    <source src="/medya/tanitim.webm" type="video/webm">
    <track kind="captions" srclang="tr" label="Türkçe" src="/medya/altyazi-tr.vtt">
    <p>Tarayıcın videoyu oynatamıyor.</p>
  </video>
</body>

Kendini test et

  1. Sesli ortam için altyazı (captions) eklemek istiyorsun. track etiketinde kind özniteliğine ne yazmalısın?

    • kind="captions"
    • kind="subtitles"
    • kind="descriptions"
    • kind="chapters"
    Cevabı göster

    kind="captions" — Doğru. kind="captions" işitsel olmayan ortam (sessiz veya sesi kapatılmış) için altyazı taşır.

  2. Türkçe altyazı kaynağını yaz

    <video controls preload="metadata" poster="/medya/on-kare.jpg">
  <source src="/medya/tanitim.mp4" type="video/mp4">
  <track kind="captions" ____="tr" label="Türkçe" src="/medya/altyazi-tr.vtt">
  <p>Tarayıcın videoyu oynatamıyor.</p>
</video>
    Cevabı göster 
    <video controls preload="metadata" poster="/medya/on-kare.jpg">
  <source src="/medya/tanitim.mp4" type="video/mp4">
  <track kind="captions" srclang="tr" label="Türkçe" src="/medya/altyazi-tr.vtt">
  <p>Tarayıcın videoyu oynatamıyor.</p>
</video>

  3. Özniteliği rolüyle eşleştir

    poster
    Ön kare görseli
    preload
    Yükleme denetimi
    controls
    Kullanıcı düğmeleri
    srclang
    Altyazı dili
    kind
    Track türü

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi