WebVTT Nedir?

WebVTT (Web Video Text Tracks Format), videolara zamanlanmış metin izleri eklemek için kullanılan metin tabanlı altyazı formatıdır. HTML5’in <track> öğesi aracılığıyla desteklenen resmi formattır ve şunları eklemenizi sağlar:

• Altyazılar (çevirilmiş konuşma)
• Altyazı (konuşma ve ses efektleri)
• Açıklamalar (ekran okuyucular için görsel bilgi)
• Bölümler (videodaki gezilebilir noktalar)
• Meta veriler

WebVTT’nin Temel Yapısı

• Bir WebVTT dosyası şunlardan oluşur:
  • İsteğe bağlı bir başlık (WEBVTT).
  • İsteğe bağlı meta veriler (yorumlar veya stil/skript blokları).
  • Cue’lar (zamanlama ve içerik içeren metin bölümleri).

1. Cue Formatı

Bir cue aşağıdaki yapıya sahiptir:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue ayarları]
Metin içeriği...

• Zamanlama: HH:MM:SS.mmm biçiminde başlangıç ve bitiş zamanları.
• Ayarlar (isteğe bağlı):
  • vertical (lr/rl dikey metin için)
  • line (konumlandırma)
  • position (yatay hizalama)
  • size (genişlik/yüzde)
  • align (start/middle/end)

2. Cue İçeriği

• Düz metin olabilir veya işaretleme içerebilir:
  • Etiketler: <b>, <i>, <u>, <ruby>, <lang> vb.
  • Zaman Damgaları (<00:00:05.000>) karaoke tarzı metin için.

3. Stil ve CSS

• Stil aşağıdaki yollarla uygulanabilir:
  • Satır içi cue’lar (etiket kullanarak).
  • CSS pseudo‑elementleri (::cue, ::cue-region) HTML içinde.

4. Meta Veri İzleri

• WebVTT, etkileşimli uygulamalar için meta veri (JSON vb.) taşıyabilir.

5. Dosya Kodlaması

• UTF-8 kodlamalı olmalıdır.
• Satırlar \r\n, \n veya \r ile sonlandırılır.

6. İşleme Kuralları

• Ayrıştırıcılar hatalı dosyaları nazikçe ele almalıdır.
• BOM (Byte Order Mark) isteğe bağlıdır.

7. HTML5 Entegrasyonu

• <track> öğesi ile kullanılır:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind değeri subtitles, captions, descriptions, chapters veya metadata olabilir.

8. Tarayıcı Desteği

• Modern tarayıcılarda (Chrome, Firefox, Safari, Edge) geniş çapta desteklenir.

9. Kullanım Senaryoları

• Altyazı/Altyazı erişilebilirlik için.
• Karaoke sözleri zamanlanmış metinle.
• Bölüm navigasyonu videolarda.
• Meta veri etkileşimli video uygulamaları için.

WebVTT Dosyasına Örnek

WEBVTT

00:00:00.000 --> 00:00:03.000
WebVTT hakkında öğreticimize hoş geldiniz.

00:00:04.000 --> 00:00:08.000
Bu videoda, HTML5 videolarınıza altyazı eklemeyi öğreneceksiniz.

Arama motorları videonuzu “izleyemez”—ancak metin tabanlı içeriği okuyabilir. WebVTT dosyalarıyla dizinlenebilir metin ekleyerek:

• Keşfedilebilirliği artırır: Google altyazı ve transkriptleri indeksleyebilir, videolarınızın daha fazla arama sonucunda görünmesini sağlar.
• Katılımı yükseltir: Altyazılı videolar kullanıcıları daha uzun tutar—oturum süresini artırır ve hemen çıkma oranını düşürür.
• Erişilebilirliği geliştirir: İşitme engelli veya işitme zorluğu çeken kullanıcılar için altyazı zorunludur ve SEO sıralama algoritmalarında da tercih edilir.

Bir WebVTT dosyası bir web sayfasındaki video ile ilişkilendirildiğinde, Google bu zamanlanmış metni ayrıştırıp anlayabilir, böylece içerik belirli sorgular için daha ilgili hâle gelir.

HTML5 Videoya WebVTT Nasıl Eklenir?

WebVTT dosyasını videonuza <track> öğesiyle ekleyebilirsiniz:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: .vtt dosyanızın yolu
• kind: Metin izi türü (subtitles, captions, chapters vb.)
• srclang: Dil kodu (ör. en, es)
• label: Oynatıcıda gösterilen iz etiketi

WebVTT ve SRT: Farkı Nedir?

WebVTT Dosyaları Oluşturmak ve Düzenlemek İçin Araçlar

.vtt dosyalarını şu araçlarla oluşturabilir veya düzenleyebilirsiniz:

• Metin Düzenleyiciler: VS Code, Sublime Text
• Altyazı Düzenleyiciler: Subtitle Edit, Amara, Aegisub
• Dönüştürücüler: SRT dosyalarını VTT’ye ve tersine dönüştürmek için araçlar

WebVTT Dosyası Nasıl Açılır?

WebVTT (.vtt) dosyasını herhangi bir metin düzenleyici veya altyazı düzenleyici ile açabilirsiniz.

Metin Düzenleyicide Açma

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

.vtt dosyaları düz metin olduğundan, normal bir metin dosyası gibi görüntüleyebilir ve düzenleyebilirsiniz.

Altyazı Düzenleyicide Açma

Daha iyi biçimlendirme, ön izleme ve zamanlama senkronizasyonu için:

• Subtitle Edit (Windows)
• Aegisub (çok platformlu)
• Amara (web tabanlı)

Tarayıcıda Açma

1. Basit bir HTML dosyası oluşturup içinde bir <video> ve <track> etiketi ekleyin.
2. HTML dosyasını bir tarayıcıda açarak videoyu altyazılı şekilde izleyin.

ASS Dosyalarının Temel Özellikleri

SSS

S1: WebVTT ile SRT arasındaki fark nedir?

C: WebVTT, SRT’ye dayanır ancak metin konumlandırma, ses etiketleri, CSS stil desteği ve meta veri gibi kritik özellikler ekler; ayrıca HTML5 video ile yerel entegrasyon sağlar.

S2: WebVTT altyazılarını YouTube’a nasıl eklerim?

C: Videonuza altyazı eklerken .vtt dosyanızı yükleyin veya YouTube’un otomatik altyazı oluşturmasını kullanıp oluşturulan WebVTT dosyasını indirerek düzenleyin.

S3: WebVTT dosyaları görüntü (image) içerebilir mi?

C: WebVTT spesifikasyonu doğrudan gömülü görüntüleri desteklemez, ancak meta veri cue’ları içinde URL’ler kullanabilir ve JavaScript ile özel görüntü render’ı uygulayabilirsiniz.

S4: WebVTT stillerim neden uygulanmıyor?

C: STYLE bloklarının ilk cue’dan önce, boş satır içermeden ve ::cue pseudo‑elementinin doğru kullanıldığından emin olun. Ayrıca tarayıcı uyumluluğunu kontrol edin.

S5: WebVTT dosyaları HLS gibi akış protokolleriyle çalışır mı?

C: Evet, HLS (HTTP Live Streaming) segmentlenmiş WebVTT’yi video ile birlikte altyazı akışı için destekler.

Kaynaklar

• WebVTT: Web Video Text Tracks Format