HTML track tag | belajar <track> element
Referensi Belajar HTML track tag. Tutorial dan panduan mengenai element <track> yang digunakan untuk menulis subtitle pada video dan tipe data lainnya untuk media element. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <track>.
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>
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).
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.
Menentukan (melabeli) judul untuk teks track. Contohnya, melabeli subtitle "Bahasa Indonesia" atau "English" yang dapat dipilih user sesuai keinginan.
Menentukan URL dari file track (.vtt file).
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
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML track tag by:apacara.com</title>
<style>
body {
font-family: verdana, sans-serif;
font-size: 14px;
margin:2em auto;
background: #444;
color:white;
text-align:center;
}
p {margin-top:3em;}
video {
-webkit-box-reflect: below 3px -webkit-linear-gradient(top, transparent, transparent 80%, rgba(255,255,255,0.2));
}
::cue {
font-family: verdana, sans-serif;
font-size: 1.1em;
background: transparent;
color: white;
text-shadow: 0 0 3px #000;
}
</style>
</head>
<body>
<video width="320" height="240" controls>
<source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>
<track label="English" kind="subtitles" srclang="en"
src="/media/video/subtitles-en.vtt">
<track label="Indonesian" kind="subtitles" srclang="id"
src="/media/video/subtitles-id.vtt" default>
Browser Anda tidak mendukung HTML video tag.
</video>
<p>Contoh yang ini menggunakan dua <track> element dengan dua subtitle, Bahasa Indonesia dan Bahasa Inggris dengan sedikit tambahan CSS styles. </p>
<p><strong>Perhatian</strong>: Jika subtitle tidak muncul, kemungkinan browser tidak support track element.</p>
</body>
</html>
SHARE