Deskripsi
Penjelasan HTML

HTML <track> element digunakan untuk menampilkan teks berdasarkan waktu putar media (audio maupun video) atau tepatnya adalah timed text tracks. <track> tag ditulis di dalam media element, seperti <audio> dan <video>.

Track dapat diartikan dengan sebuah jejak. Kita dapat mengatur jejak teks yang ingin ditampilkan pada sebuah media, ketika media tersebut diputar (dimainkan) berdasarkan durasi (Jam, menit, dan detik) waktu putar media tersebut.

Istilah track mungkin kita dapat memahaminya, ketika kita menonton video karaoke. Syair dalam sebuah video karaoke, akan muncul di layar pada waktu tertentu sesuai dengan vokal yang disuarakan oleh penyanyi. Ini, dinamakan juga subtitle. Teks yang muncul tersebut, dapat dikatakan sebuah teks track. Dalam HTML, Teks track ditulis pada sebuah file terpisah dengan format ".vvt" (WebVVT).

Dalam sebuah media element (<audio> dan <video>) dapat ditulis lebih dari satu <track> element. Akan tetapi, masing-masing element tersebut tidak boleh memiliki attribute kind, srclang dan label dengan konten value yang sama.

Attributes
Atribut HTML Tag <track>

default

Menunjukkan bahwa track ini harus diberlakukan jika tidak ada pilihan lain yang tepat untuk user. Attribute ini hanya boleh ditulis satu kali dalam sebuah elemen <track> per media (audio atau video).

kind

Menunjukkan jenis track. Teks track yang ditulis dalam .vtt file dapat berisi beragam jenis konten, diantaranya adalah captions (judul), chapters (bab), descriptions (penjelasan), metadata dan subtitles (judul tambahan).

  • captions
    Transkripsi atau terjemahan sebuah dialog, efek suara, isyarat musik terkait atau terjemahan audio dan informasi audio lainnya yang berkaitan. Tepatnya digunakan ketika track suara tidak tersedia.
  • chapters
    Judul bab, digunakan dengan maksud untuk navigasi sumber media.
  • descriptions
    Penjelasan tekstual dari konten video, ditujukan untuk audio sintesis, tepatnya untuk seorang tunanetra (buta) yang mana video tidak dapat ditonton.
  • metadata
    Track yang digunakan oleh script, tidak nampak secara visual.
  • subtitles
    Transkripsi atau terjemahan sebuah dialog. Tepatnya digunakan ketika suara (audio) terdengar tetapi tidak jelas.
label

Menentukan (melabeli) judul untuk teks track. Contohnya, melabeli subtitle "Bahasa Indonesia" atau "English" yang dapat dipilih user sesuai keinginan.

src

Menentukan URL dari file track (.vtt file).

srclang

Menentukan kode bahasa yang menunjukkan bahasa yang digunakan pada teks track. Kode bahasa yang digunakan harus valid BCP 47. Jika attribute kind yang digunakan pada <track> element adalah subtitles, maka attribute srclang wajib ditulis.

Contoh: <track kind="subtitles" srclang="id" src="subtitle-indo.vtt">

"id" adalah kode untuk "Bahasa Indonesia".


Global Attributes
Atribut Secara Global (Keseluruhan)

<track> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<track> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <track> element

<video width="320" height="240" controls>
  <source src='halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src='halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src="halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

  <track label="Indonesian" kind="subtitles" srclang="id" src="subtitles-id.vtt" default>
  Browser Anda tidak mendukung HTML video tag.
</video>

"subtitles-id.vtt" adalah file webVTT yang dibuat untuk menulis format teks track atau cues dan sebagainya. Contohnya, adalah sebagai berikut:

WEBVTT FILE

1
00:00:00.500 --> 00:00:04.000
ih.... (ini contoh subtitle menggunakan .vvt)

2
00:00:04.500 --> 00:00:06.300
ih.. ih.. A-ba-ta-tsa nih...!

3
00:00:07.000 --> 00:00:09.000
kok! A-ba-ta-tsa...

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <track>
Code Editor