Captions dan Subtitles

Video sering ditonton tanpa suara: di tempat umum, di kereta, atau oleh pengguna tuli yang mengandalkan teks. Elemen track mengisi kebutuhan itu dengan menyematkan teks pita — captions, subtitles, dan semacamnya — pada video maupun audio. Pada Chapter ini kita mengenal atribut kind beserta nilainya, menulis file teks WebVTT sederhana, lalu menggabungkan semuanya dalam video yang aksesibel.

Elemen track dan Atribut kind #

track adalah void element yang ditulis di dalam video atau audio, biasanya setelah deretan source. Satu media boleh membawa beberapa track, dan atribut kind menyatakan jenis tiap track sehingga browser tahu bagaimana menanganinya:

Dua nilai pertama sering tertukar: subtitles mengasumsikan penonton mendengar suara tetapi tidak paham bahasanya, sedangkan captions ditulis bagi penonton yang tidak mendengar sama sekali sehingga efek suara ikut dituliskan.

srclang, label, dan default #

Atribut srclang menuliskan bahasa teks pita dengan kode BCP 47 seperti id atau en; standar HTML mewajibkan srclang pada track ber-kind="subtitles". Atribut label memberi nama yang tampil pada menu pemilihan track, misalnya “Bahasa Indonesia”. Atribut default menandai track yang dinyalakan sejak awal, dan standar membatasinya: satu media hanya boleh punya satu track default untuk setiap kelompok jenis yang sama.

Bila default tidak ditulis sama sekali, track tetap tersedia tetapi menunggu penonton menyalakannya lewat menu player. Kebiasaan yang baik: tandai default pada teks pita yang paling dibutuhkan mayoritas penonton, misalnya bahasa halaman itu sendiri.

Format WebVTT #

File teks pita memakai format WebVTT dengan akhiran .vtt. Isinya berupa baris pembuka WEBVTT, lalu rangkaian cue: rentang waktu dengan pemisah panah, diikuti teks yang tampil selama rentang tersebut. Waktu ditulis dalam format jam:menit:detik.milidetik. Berikut file subtitel kecil berbahasa Indonesia untuk video resep:

WEBVTT

00:00:01.000 --> 00:00:04.200
Cuci cabang hingga bersih.

00:00:04.500 --> 00:00:08.000
Haluskan dengan blender hingga lembut.

Simpan blok tersebut sebagai file teks biasa bernama subtitel-id.vtt di samping file HTML. Untuk captions, teks pada cue ditambah petunjuk bunyi seperti [gemuruh] atau [musik ceria] sehingga penonton tuli tetap menangkap suasana rekaman.

Mengapa track Penting untuk Aksesibilitas #

Bagi pengguna tuli, captions adalah pintu masuk informasi audio: dialog, efek suara, hingga petunjuk suasana. Track juga membantu penonton yang menonton tanpa suara serta pembelajar bahasa asing. Pedoman WCAG menuntut captions bagi video berdialog pada Level A — tingkat persyaratan paling dasar — sehingga teks pita bukan pelengkap opsional. Prinsip aksesibilitas yang lebih luas menanti pada section Accessibility.

Contoh Lengkap dalam Satu File #

File berikut menempelkan dua track subtitel pada video resep: Bahasa Indonesia sebagai bawaan dan English sebagai pilihan alternatif. File video dan kedua file .vtt perlu pembaca sediakan sendiri mengikuti pola blok WebVTT di atas:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Track dan WebVTT</title>
</head>
<body>
  <h1>Video resep dengan teks pita</h1>
  <video controls width="640" height="360" poster="sampul-sambal.jpg">
    <source src="sambal.mp4" type="video/mp4">
    <track src="subtitel-id.vtt" kind="subtitles" srclang="id" label="Bahasa Indonesia" default>
    <track src="subtitel-en.vtt" kind="subtitles" srclang="en" label="English">
    Browser ini tidak mendukung pemutaran video. Unduh videonya
    <a href="sambal.mp4">di sini</a>.
  </video>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Area pemutar 640x360 dengan gambar sampul dan player bawaan
  - Subtitel "Cuci cabang hingga bersih." tampil pada detik 1-4,
    lalu cue berikutnya pada detik 4-8
  - Menu pemilihan track di player memuat dua pilihan:
    "Bahasa Indonesia" (aktif sejak awal) dan "English"

Mari kita telaah baris-baris penting pada file di atas:

1. Baris 10 (video pembuka): controls penting karena menampung menu pemilihan track; tanpa itu, penonton tak punya akses ke pilihan teks pita.
2. Baris 11 (source mp4): sumber video tunggal, sesuai pembahasan chapter sebelumnya.
3. Baris 12 (track Indonesia): srclang="id" wajib karena kind-nya subtitles, label menamai pilihan pada menu, dan default menyalakannya sejak awal.
4. Baris 13 (track English): track kedua tanpa default — standar melarang dua default pada kelompok subtitles yang sama.
5. Baris 14-15 (teks pengganti): tetap ditulis sebagai lapisan cadangan bagi browser yang tidak mengenal video.

Dengan track, video kita ramah bagi penonton yang menonton tanpa suara. Chapter terakhir section ini merangkum pola-pola cadangan yang tersebar sepanjang perjalanan kita: media fallbacks.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen track
• MDN Web Docs — WebVTT API
• WHATWG — HTML Living Standard: Media elements

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Track dan WebVTT</title>
</head>
<body>
  <h1>Video resep dengan teks pita</h1>
  <video controls width="640" height="360" poster="sampul-sambal.jpg">
    <source src="sambal.mp4" type="video/mp4">
    <track src="subtitel-id.vtt" kind="subtitles" srclang="id" label="Bahasa Indonesia" default>
    <track src="subtitel-en.vtt" kind="subtitles" srclang="en" label="English">
    Browser ini tidak mendukung pemutaran video. Unduh videonya
    <a href="sambal.mp4">di sini</a>.
  </video>
</body>
</html>