Dalam artikel ini Anda akan belajar tentang format WebVTT (Web Video Text Track), yang digunakan untuk menjelaskan data teks dengan waktu, seperti teks tertutup atau subtitel untuk membuat video lebih mudah diakses oleh audiens Anda.
Aksesibilitas tidak seperti lapisan gula di atas kue. Perangkat bukanlah sesuatu yang Anda kenakan {i>backlog<i} dengan harapan dapat diperkenalkan nanti. Teks dan pembaca layar deskripsi adalah satu-satunya cara bagi banyak pengguna untuk menikmati video Anda, dan beberapa wilayah hukum, bahkan diwajibkan oleh hukum atau peraturan.
Tambahkan tag <track>
Untuk menambahkan teks atau deskripsi pembaca layar ke video web, tambahkan <track>
dalam tag <video>. Selain teks dan pembaca layar
deskripsi, tag <track> juga dapat digunakan untuk judul subtitel dan bab.
Tag <track> juga dapat membantu mesin telusur memahami isi video.
Namun, kemampuan tersebut berada di luar cakupan artikel ini.
Tag <track> mirip dengan elemen <source> yang keduanya memiliki src
yang menunjuk ke konten yang direferensikan. Untuk tag <track>, elemen ini mengarah ke
File WebVTT. Atribut label menentukan cara trek tertentu
yang diidentifikasi di antarmuka.
Untuk menyediakan lagu untuk beberapa bahasa, tambahkan tag <track> terpisah untuk setiap bahasa
File WebVTT yang Anda berikan dan tunjukkan bahasa menggunakan srclang
.
Contoh tag <video> dengan dua tag <track> ditampilkan di bawah ini. Tersedia juga
contoh yang dapat Anda lihat di Glitch (sumber).
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>
Struktur file WebVTT
Berikut adalah hipotesis file WebVTT untuk demo yang ditautkan di atas. File tersebut adalah file teks yang berisi serangkaian isyarat. Setiap tanda adalah blok teks yang akan ditampilkan di layar, dan rentang waktu saat produk akan 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 disebut sinyal. Setiap tanda memiliki
waktu mulai dan
waktu berakhir yang dipisahkan oleh tanda panah, dengan teks isyarat pada baris di bawahnya. Isyarat dapat
secara opsional juga memiliki ID seperti railroad dan manuscript dalam contoh di bawah.
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. Penguraian bersifat ketat.
Artinya, angka harus diisi dengan nol jika perlu: 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
Validator WebVTT Live, yang memeriksa kesalahan dalam pemformatan waktu, dan
seperti waktu yang tidak
berurutan.
Anda dapat membuat file VTT secara manual, karena ada banyak layanan yang dapat membuatnya untuk Anda.
Seperti yang Anda lihat pada contoh kami sebelumnya, format WebVTT cukup sederhana. Cukup tambahkan data teks Anda beserta pengaturan waktu.
Namun, bagaimana jika Anda ingin teks dirender di posisi yang berbeda dengan
perataan kiri atau kanan? Mungkin untuk menyelaraskan teks dengan pembicara saat ini
atau untuk menjauh dari teks dalam kamera. WebVTT menentukan pengaturan
untuk melakukan itu,
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 tentang gaya dan pemberian tag Sebagai isyarat, spesifikasi WebVTT merupakan sumber yang baik untuk contoh-contoh lanjutan.
Jenis trek teks
Apakah Anda melihat atribut kind dari elemen <track>? Ini digunakan untuk
menunjukkan hubungan apa yang dimiliki trek teks tertentu dengan video. Tujuan
kemungkinan nilai atribut kind adalah:
captions: Untuk teks tertutup dari transkrip dan mungkin terjemahan audio apa pun. Cocok untuk penyandang gangguan pendengaran dan jika video diputar memutar dengan audio dibisukan.subtitles: Untuk subtitel, yaitu terjemahan ucapan dan teks dalam bahasa yang berbeda dari bahasa utama video.descriptions: Untuk deskripsi bagian visual konten video. Sesuai untuk penyandang gangguan penglihatan.chapters: Dimaksudkan untuk ditampilkan saat pengguna menavigasi dalam video Anda.metadata: Tidak terlihat, dan dapat digunakan oleh skrip.
Setelah Anda memahami dasar-dasar pembuatan video yang tersedia dan dapat diakses di halaman web, Anda mungkin bertanya-tanya tentang kasus penggunaan yang lebih kompleks. Selanjutnya, Anda akan Pelajari framework Media dan bagaimana framework tersebut dapat membantu Anda menambahkan video ke laman web dan menyediakan fitur lanjutan.