HTML Academy · Ders

track ve WebVTT ile Altyazılar

track ve .vtt dosyalarıyla videoya açıklamalı altyazılar ve altyazılar ekleyin

4. ders / 414 adım

track ve WebVTT ile Altyazılar, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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.

Altyazılar ve İşitme Altyazıları

Video erişilebilirliği, ses içeriği için metin alternatifleri gerektirir:

Altyazılar — konuşmanın metne dökümü; izleyicinin sesleri duyabildiği varsayılır
İşitme altyazıları — konuşma ve ses açıklamaları (sağır kullanıcılar için)
Sesli betimlemeler — kör kullanıcılar için görsel içeriği açıklar

track Öğesi

<track> öğesi, bir altyazı/işitme altyazısı dosyasını videoya bağlar:

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

track Öznitelikleri

track öğesi öznitelikleri:

src — VTT dosyasının yolu
kind — parçanın türü (subtitles, captions, descriptions, chapters, metadata)
srclang — BCP 47 dil kodu (en, es, fr...)
label — CC menüsünde gösterilen, insanlar tarafından okunabilir ad
default — boolean; bu parça varsayılan olarak gösterilir

WebVTT Biçimi

WebVTT (Web Video Text Tracks), altyazı dosyası biçimidir:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

VTT cue Tanımlayıcıları

VTT cue öğeleri isteğe bağlı tanımlayıcılara sahip olabilir:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

VTT cue Ayarları

VTT cue öğeleri konumlandırma ayarlarını destekler:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

WebVTT cue Öğelerini CSS ile Biçimlendirme

cue kutularını ::cue sözde öğesiyle biçimlendirin:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

track kind Değerleri

kind özniteliği, metin parçasının amacını belirtir:

subtitles — konuşmanın çevirisi veya metin dökümü
captions — sağır kullanıcılar için konuşma ve ses açıklamaları
descriptions — kör kullanıcılar için görsel içeriğin sesli betimlemesi
chapters — gezinme için bölüm başlıkları
metadata — JavaScript için makine tarafından okunabilir veriler

Bölüm Parçası

Video bölümlerinde gezinmek için kind=chapters kullanın:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

JavaScript TextTrack Uygulama Programlama Arayüzü

Parça verilerine TextTrack uygulama programlama arayüzüyle erişin:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Etkileşimli Video için Meta Veri Parçası

Belirli zamanlarda JavaScript olaylarını tetiklemek için meta veri parçalarını kullanın:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Erişilebilirlik Gereklilikleri

WCAG, önceden kaydedilmiş videolar için altyazı gerektirir:

A Düzeyi — ses içeren tüm önceden kaydedilmiş videolar için altyazı
AA Düzeyi — tüm önceden kaydedilmiş videolar için sesli betimlemeler
Otomatik oluşturulan altyazılar (YouTube), inceleme yapılmadan yeterli değildir
Altyazılar doğru, eş zamanlı ve eksiksiz olmalıdır

Hızlı Kontrol

subtitles ve captions parça türleri arasındaki fark nedir?

İnteraktif derste cevapla

Özet: track ve WebVTT

Altyazı ve işitme altyazısının temel noktaları:

Video içindeki <track src kind srclang label default>
kind: subtitles, captions, descriptions, chapters, metadata
WebVTT dosya biçimi: WEBVTT + zaman damgası --> zaman damgası + metin
cue öğelerini ::cue CSS sözde öğesiyle biçimlendirin
WCAG, önceden kaydedilmiş videolar için altyazı gerektirir

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“track ve WebVTT ile Altyazılar” dersi ücretsiz mi?

Evet — “track ve WebVTT ile Altyazılar” 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.

“track ve WebVTT ile Altyazılar” dersinde ne öğreneceğim?

track ve .vtt dosyalarıyla videoya açıklamalı altyazılar ve altyazılar ekleyin 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 4. dersidir.

“track ve WebVTT ile Altyazılar” 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

← HTML Academy Sayfasına Dön