Elemen track

Takarir tidak tertanam di dalam berkas video — keduanya berkas terpisah yang diikat oleh satu elemen kecil: track. Elemen ini menyambungkan berkas teks berformat WebVTT ke pemutar, lalu browser menampilkan teksnya tepat di waktu yang kita tandai. Tanpa track, sepuluh trek takarir sekalipun tidak akan pernah tampil.

Chapter ini membahas empat atribut track, lima nilai kind, format berkas WebVTT, dan dua masalah penyajian yang paling sering membuat takarir gagal muncul.

Aturan Dasar track #

Elemen track diletakkan di dalam video atau audio, berdampingan dengan source. Sebagai void element, track tidak punya tag penutup maupun isi. Empat atributnya bekerja sama: src menunjuk berkas WebVTT (ekstensi .vtt), kind menentukan jenis trek, srclang menyatakan kode bahasanya seperti id atau en, dan label berisi teks yang tampil di menu takarir pemutar.

Nilai kind menentukan bagaimana browser memperlakukan isi trek:

`kind`	Isi trek	Fungsi
`subtitles`	dialog dialihbahasakan	teks tampil di atas video
`captions`	dialog + petunjuk suara	alternatif teks lengkap untuk penonton yang tidak dapat mendengar
`descriptions`	deskripsi visual	dibacakan pembaca layar untuk pengunjung yang tidak dapat melihat
`chapters`	judul bab	navigasi untuk melompat ke bagian video
`metadata`	data bebas	dipakai skrip; tidak tampil di pemutar

Atribut boolean default pada satu track membuat trek itu aktif sejak video dibuka, tanpa menunggu pengunjung memilih. Hanya satu track yang boleh membawa default.

Format WebVTT #

Berkas .vtt diawali baris WEBVTT, lalu diikuti kumpulan cue. Satu cue terdiri dari rentang waktu dan teksnya. Rentang ditulis dalam format jam:menit:detik.milidetik, dipisah tanda -->:

text
WEBVTT

00:00:01.000 --> 00:00:04.000
Selamat pagi! Selamat datang kembali di Kopi Pagi.

00:00:04.500 --> 00:00:08.000
Hari ini kita bahas tiga varian kopi gula aren.

00:00:08.500 --> 00:00:12.000
Bahan pertama: kopi bubuk dan gula aren cair.

Browser menampilkan baris teks hanya selama rentang waktunya berjalan. Di luar rentang itu, teks menghilang dari layar dengan sendirinya.

Menempelkan track ke video #

Dengan berkas .vtt siap, pemasangannya satu elemen per trek. Video tutorial rendang Siti berikut memakai takarir Indonesia sebagai bawaan dan Inggris sebagai pilihan:

html
<video controls width="640" height="360" poster="video/sampul-rendang.jpg">
  <source src="video/tutorial-rendang.mp4" type="video/mp4">
  <track src="video/takarir-rendang-id.vtt" kind="subtitles" srclang="id" label="Bahasa Indonesia" default>
  <track src="video/takarir-rendang-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Mari kita telaah kode di atas:

Baris 1 (<video ...>): pemutar dengan sampul dan kendali bawaan, tanpa src — kandidat berkasnya datang dari source.
Baris 2 (<source ...>): kandidat video MP4, seperti dibahas pada chapter Elemen source.
Baris 3 (<track ... default>): takarir bahasa Indonesia; default membuatnya menyala sejak video dibuka.
Baris 4 (<track ...>): takarir bahasa Inggris; tampil sebagai pilihan di menu takarir pemutar.
srclang dan label: kode bahasa dibaca browser untuk mencocokkan trek dengan bahasa antarmuka; label dibaca manusia di menu — keduanya saling melengkapi, bukan saling menggantikan.

Pengunjung melihat tombol takarir di bilah kendali; menekannya membuka menu berisi dua label: Bahasa Indonesia dan English.

Coba sendiri mekanismenya pada demo berikut — video pendek dengan satu trek takarir default, sehingga takarir aktif sejak detik pertama:

Putar videonya: takarir menyala sejak awal karena atribut default, baris pertama tergantikan tepat pada detik ketiga sesuai rentang waktunya. Tekan tombol takarir (CC) pada bilah kendali — di sanalah label “Bahasa Indonesia” tampil sebagai pilihan trek.

Pada demo, video diganti media daring (CC0, dari MDN) yang membutuhkan koneksi internet, dan berkas .vtt disematkan sebagai data URI agar demo tetap satu potongan utuh. Pada berkas milikmu, gunakan berkas .vtt sungguhan — ingat aturan pada catatan di bawah: jalur, header text/vtt, dan se-domain dengan videonya.

Ringkasan #

track void element di dalam video/audio; satu elemen mengikat satu berkas .vtt.
Atribut kuncinya: src, kind, srclang, label, dan default untuk satu trek aktif.
WebVTT berisi cue dengan rentang waktu jam:menit:detik.milidetik dan teksnya.
Jalur berkas, header text/vtt, dan CORS adalah tiga penyebab takarir gagal tampil.

Trek dan format pemutar sudah lengkap. Satu pertanyaan tersisa sebelum media kita terbit: berkas format apa yang paling layak disiapkan? Chapter berikutnya memetakan format audio dan video.