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 (Web Video Text Tracks) digunakan untuk mendeskripsikan data teks yang diberi waktu, seperti teks tertutup atau subtitel, agar video Anda lebih mudah diakses.
Tambahkan 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> yang keduanya memiliki src
yang menunjuk ke konten yang direferensikan. Untuk tag <track>, tag ini mengarah ke
file WebVTT.
Atribut label menentukan cara trek tertentu
yang telah 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 file WebVTT hipotetis untuk demo. Ini adalah file teks yang berisi serangkaian isyarat. Setiap tanda adalah blok teks yang akan ditampilkan di layar, dan rentang waktu waktunya 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 isyarat. 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 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 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. Cocok untuk orang dengan gangguan penglihatan.chapters: Dimaksudkan untuk ditampilkan saat pengguna menavigasi dalam video.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. Pelajari tentang Framework media dan caranya membantu Anda menambahkan video ke laman web, sambil memberikan fitur lanjutan.