Subtitle Video dengan track

Lirik Karaoke untuk Videomu

Pernah karaoke? Lirik lagu berjalan di layar mengikuti musik, sehingga semua orang bisa ikut bernyanyi, bahkan yang tidak hafal lagunya atau yang pendengarannya kurang. Elemen track di HTML adalah "lirik karaoke" untuk video: file teks berwaktu yang berjalan sinkron dengan video, menampilkan subtitle, teks dialog, atau deskripsi suara.

Kenapa ini penting? Video tanpa subtitle mengecualikan banyak orang: 430 juta orang di dunia punya gangguan pendengaran, banyak orang menonton video dalam keadaan bisu (di kereta, di kantor, larut malam), dan tidak semua penonton fasih berbahasa video tersebut. Subtitle mengubah video dari "hanya untuk yang bisa mendengar" menjadi "untuk semua orang". Dan kabar baiknya: HTML punya dukungan bawaan untuk ini, tanpa plugin apa pun.

Kenalan dengan Elemen track

Elemen track selalu menjadi anak dari video (atau audio), dan ia menunjuk ke file teks berformat WebVTT (.vtt). Ia punya empat atribut penting:

• src: alamat file .vtt berisi teks berwaktu.
• kind: jenis teksnya. Pilihan utama: subtitles (terjemahan dialog ke bahasa lain), captions (teks dialog plus deskripsi suara seperti "[musik]" atau "[tepuk tangan]", untuk penonton dengan gangguan pendengaran), descriptions (narasi adegan visual), chapters (penanda bab), dan metadata.
• srclang: kode bahasa file itu, misalnya id untuk Indonesia atau en untuk Inggris. Wajib ada untuk kind="subtitles".
• label: nama yang tampil di menu pemilih subtitle pada pemutar video, misalnya "Indonesia".
• default: atribut boolean opsional yang menjadikan track ini aktif secara otomatis.

Contoh 1: Video Satu Bahasa

Contoh paling sederhana: video tutorial dengan subtitle Indonesia.

<video controls width="640">
  <source src="tutorial-tubruk.mp4" type="video/mp4" />
  <track src="tutorial-tubruk.id.vtt" kind="subtitles"
         srclang="id" label="Indonesia" default />
  Maaf, browser Anda tidak mendukung video.
</video>

Isi file tutorial-tubruk.id.vtt (format WebVTT) terlihat seperti ini:

Baris pertama wajib WEBVTT, lalu setiap blok berisi rentang waktu (format menit:detik.milidetik) dan teks yang tampil pada rentang itu. Sederhana, bukan? File teks biasa yang bisa ditulis di Notepad.

Contoh 2: Video Multibahasa yang Realistis

Contoh nyata: video profil warkop dengan subtitle Indonesia dan Inggris, plus captions untuk penonton dengan gangguan pendengaran.

<video controls width="640" poster="warkop-poster.jpg">
  <source src="profil-warkop.mp4" type="video/mp4" />
  <source src="profil-warkop.webm" type="video/webm" />
  <track src="profil-warkop.id.vtt" kind="subtitles"
         srclang="id" label="Indonesia" default />
  <track src="profil-warkop.en.vtt" kind="subtitles"
         srclang="en" label="English" />
  <track src="profil-warkop.cc.vtt" kind="captions"
         srclang="id" label="Indonesia (CC)" />
  Maaf, browser Anda tidak mendukung video.
</video>

Perhatikan tiga hal. Pertama, hanya satu track yang boleh punya default, yaitu subtitle Indonesia yang aktif otomatis. Kedua, penonton bisa berganti bahasa lewat menu CC pada kontrol video bawaan browser, tanpa JavaScript. Ketiga, track captions berisi deskripsi suara juga:

Inilah beda subtitles dan captions: subtitles menerjemahkan ucapan, captions juga menjelaskan suara non-ucapan. Untuk aksesibilitas penuh, captions lebih lengkap.

Kenapa Subtitle Penting: Aksesibilitas dan SEO

Aksesibilitas. Subtitle membuat videomu bisa dinikmati penonton tunarungu, penonton di lingkungan bising, dan penonton yang menonton tanpa suara. Ini bukan fitur tambahan, ini hak dasar akses informasi.

SEO. Mesin pencari tidak bisa "menonton" video, tetapi mereka bisa membaca file .vtt. Teks subtitle yang mengandung kata kunci topikmu membantu video dan halamanmu ditemukan. Video bersubtitle juga ditonton lebih lama (orang bertahan karena bisa mengikuti tanpa suara), dan durasi tonton adalah sinyal peringkat.

Jangkauan bahasa. Satu video dengan subtitle dua bahasa menjangkau audiens dua kali lipat tanpa biaya produksi ulang.

Kesalahan Umum Pemula

Salah: lupa atribut srclang pada kind="subtitles".

<!-- SALAH: browser tidak tahu ini bahasa apa -->
<track src="video.vtt" kind="subtitles" label="Indonesia" />

<!-- BENAR -->
<track src="video.vtt" kind="subtitles" srclang="id" label="Indonesia" />

Tanpa srclang, browser tidak bisa mencocokkan subtitle dengan preferensi bahasa pengguna, dan validasi HTML menganggapnya tidak lengkap.

Salah: memakai kind="subtitles" untuk teks yang berisi deskripsi suara. Kalau file-mu berisi "[musik]" dan "[tepuk tangan]", itu captions, bukan subtitles. Jenis yang tepat membantu teknologi bantu memilih track yang benar.

Salah: menaruh track di luar video. Elemen track hanya bermakna sebagai anak dari media element (video atau audio). Di luar itu ia tidak melakukan apa-apa.

Salah: mengandalkan subtitle "bakar" (hardcoded) di dalam video. Subtitle yang dibakar permanen ke gambar video tidak bisa dimatikan, tidak bisa diganti bahasa, tidak bisa dibaca screen reader, dan tidak bisa diindeks mesin pencari. Selalu sediakan subtitle sebagai track terpisah; versi bakar hanya sebagai pilihan terakhir.

Salah: format waktu VTT yang keliru. Formatnya MM:SS.mmm (titik sebelum milidetik, bukan koma seperti format SRT). Satu karakter salah dan seluruh blok teks tidak tampil, tanpa pesan error yang jelas. Periksa dua kali.

Catatan teknis: File .vtt harus disajikan server dengan MIME type text/vtt. Kebanyakan hosting modern sudah menanganinya otomatis, tetapi kalau subtitle-mu tidak muncul padahal kode benar, MIME type adalah tersangka pertama. Selain itu, untuk keamanan browser, file track tunduk pada aturan CORS yang sama seperti fetch: subtitle dari domain lain butuh izin CORS dari server pemiliknya.