Dipublikasikan: 20 Agustus 2020
Teks dan deskripsi pembaca layar adalah satu-satunya cara bagi banyak pengguna untuk menikmati video Anda, dan di beberapa wilayah hukum, teks dan deskripsi pembaca layar bahkan diwajibkan oleh hukum atau peraturan. Format WebVTT (Trek Teks Video Web) digunakan untuk mendeskripsikan data teks dengan waktu, seperti teks tertutup atau subtitel, agar video Anda lebih mudah diakses.
Menambahkan tag <track>
Untuk menambahkan teks atau deskripsi pembaca layar ke video web, tambahkan tag <track>
dalam tag <video>
. Selain teks dan deskripsi pembaca layar, tag <track>
juga dapat digunakan untuk subjudul dan judul segmen.
Tag <track>
mirip dengan elemen <source>
karena keduanya memiliki atribut src
yang mengarah ke konten yang dirujuk. Untuk tag <track>
, tag ini mengarah ke
file WebVTT.
Atribut label
menentukan cara jalur tertentu dapat
diidentifikasi di antarmuka.
Untuk menyediakan trek untuk beberapa bahasa, tambahkan tag <track>
terpisah untuk setiap
file WebVTT yang Anda berikan dan tunjukkan bahasa menggunakan atribut
srclang
.
Lihat contoh tag <video>
ini dengan dua tag <track>
.
Tambahkan elemen <track>
sebagai turunan elemen <video>
.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Ada juga contoh yang dapat Anda lihat di Glitch.
Struktur file WebVTT
Berikut adalah hipotesis file WebVTT untuk demo tersebut. Ini adalah file teks yang berisi serangkaian isyarat. Setiap isyarat adalah blok teks yang akan ditampilkan di layar, dan rentang waktu selama teks tersebut ditampilkan.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Setiap item dalam file trek adalah cue. Setiap isyarat memiliki waktu mulai dan
waktu berakhir, dipisahkan dengan panah, diikuti dengan teks isyarat. Isyarat juga dapat memiliki ID, seperti railroad
dan manuscript
. Isyarat dipisahkan oleh baris kosong.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Waktu tanda menggunakan format hours:minutes:seconds.milliseconds
. Pemrosesan sangat ketat.
Artinya, angka harus diisi dengan nol jika diperlukan: jam, menit, dan detik
harus memiliki dua digit (00 untuk nilai nol) dan milidetik harus memiliki tiga
digit (000 untuk nilai nol). Ada validator WebVTT yang sangat baik di
Live WebVTT Validator, yang memeriksa error dalam pemformatan waktu, dan
masalah seperti waktu yang tidak berurutan.
Anda dapat membuat file VTT secara manual, karena ada banyak layanan yang membuatnya untuk Anda.
Seperti yang dapat Anda lihat pada contoh sebelumnya, format WebVTT cukup sederhana. Cukup tambahkan data teks Anda beserta pengaturan waktu.
Namun, bagaimana jika Anda ingin teks dirender dalam posisi yang berbeda dengan
perataan kiri atau kanan? Mungkin untuk menyelaraskan teks dengan posisi pembicara
saat ini, atau agar tidak menghalangi teks dalam kamera. WebVTT menentukan setelan untuk melakukannya,
dan lainnya, langsung di dalam
file .vtt
. Perhatikan cara penempatan teks ditentukan dengan menambahkan
setelan setelah definisi interval waktu.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Fitur praktis lainnya adalah kemampuan untuk menata gaya isyarat menggunakan CSS. Mungkin Anda ingin
menggunakan gradien linier abu-abu sebagai latar belakang, dengan warna latar depan
papayawhip
untuk semua teks dan semua teks tebal berwarna peachpuff
.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Jika Anda tertarik untuk mempelajari lebih lanjut gaya visual dan pemberian tag pada setiap isyarat, spesifikasi WebVTT adalah sumber yang bagus untuk contoh lanjutan.
Jenis trek teks
Apakah Anda melihat atribut kind
dari elemen <track>
? Ini digunakan untuk
menunjukkan hubungan trek teks tertentu dengan video. Kemungkinan nilai atribut kind
adalah:
captions
: Untuk teks tertutup dari transkrip dan mungkin terjemahan audio apa pun. Cocok untuk pengguna yang memiliki gangguan pendengaran dan saat video diputar dalam mode bisu.subtitles
: Untuk subtitel, yaitu terjemahan ucapan dan teks dalam bahasa yang berbeda dengan bahasa utama video.descriptions
: Untuk deskripsi bagian visual konten video. Cocok untuk orang dengan gangguan penglihatan.chapters
: Dimaksudkan untuk ditampilkan saat pengguna menavigasi dalam video.metadata
: Tidak terlihat, dan dapat digunakan oleh skrip.
Setelah memahami dasar-dasar untuk membuat video tersedia dan dapat diakses di halaman web, Anda mungkin bertanya-tanya tentang kasus penggunaan yang lebih kompleks. Pelajari Framework media dan caranya membantu Anda menambahkan video ke halaman web, sekaligus menyediakan fitur lanjutan.