CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Track ve altyazı

HTML kursu · İleri seviye · Ders 15/56

<track> ile altyazı ve chapter eklersin.

track etiketi ve kind

<track> etiketi videoya metin izleri ekler: altyazı, bölüm noktaları veya sesli betimler. Her iz bir WebVTT dosyasına bağlanır (src ile) ve kind özniteliği izin türünü belirtir.

kind="captions" işitme engelli izleyiciler için altyazı sağlar; konuşmaların yanında ses efektlerini de metne katar. kind="subtitles" ise çeviri amaçlıdır.

Track etiketi video içinde, source etiketlerinden sonra yer alır.

srclang ve label

Her <track> etiketi iki öznitelik daha ister: srclang altyazının dil kodunu (ör. tr, en) verir; label ise oynatıcının menüsünde gösterilecek insan-okurabilir adı belirler (ör. Türkçe, English).

Bu iki öznitelik olmadan ekran okuyucular ve oynatıcı menüleri doğru izi seçemez. Her zaman dolu değer verin.

Uygulama İki captions track'i ekle

Önceki dersin videosunu al. Video içine, source etiketlerinden sonra iki <track> ekle. Birincisi: kind="captions" src="/altyazilar/karadeniz-tr.vtt" srclang="tr" label="Türkçe". İkincisi: kind="captions" src="/altyazilar/karadeniz-en.vtt" srclang="en" label="İngilizce".

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Doğa Belgeseli: Karadeniz</title>
  </head>
  <body>
    <video controls>
      <source src="/videolar/karadeniz.mp4" type="video/mp4">
      <source src="/videolar/karadeniz.webm" type="video/webm">
      <track kind="captions" src="/altyazilar/karadeniz-tr.vtt" srclang="tr" label="Türkçe">
      <track kind="captions" src="/altyazilar/karadeniz-en.vtt" srclang="en" label="İngilizce">
    </video>
  </body>
</html>

Kendini test et

  1. İşitme engelli izleyiciler için hangi kind değeri kullanılır?

    • captions
    • subtitles
    • chapters
    • descriptions
    Cevabı göster

    captions — Doğru! kind="captions" işitme engelli izleyiciler için altyazı sağlar; ses efektlerini de metne katar.

  2. Türkçe altyazının dil kodunu yaz

    <track kind="captions" src="/altyazilar/karadeniz-tr.vtt" srclang="____" label="Türkçe">
    Cevabı göster 
    <track kind="captions" src="/altyazilar/karadeniz-tr.vtt" srclang="tr" label="Türkçe">

  3. kind değerini amacıyla eşleştir.

    captions
    işitme engelli için altyazı
    subtitles
    çeviri altyazısı
    chapters
    bölüm noktaları
    descriptions
    görme engelli için betim

İ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