Apa Itu WebVTT?

WebVTT (Web Video Text Tracks Format) adalah format subtitle berbasis teks yang digunakan untuk menambahkan trek teks berwaktu ke video. Ini adalah format resmi yang didukung HTML5 melalui elemen <track>, memungkinkan Anda menambahkan:

• Subtitle (terjemahan ucapan)
• Caption (ucapan dan efek suara)
• Deskripsi (informasi visual untuk pembaca layar)
• Bab (titik navigasi dalam video)
• Metadata

Struktur Dasar WebVTT

• Sebuah file WebVTT terdiri dari:
  • Header opsional (WEBVTT).
  • Metadata opsional (komentar atau blok style/script).
  • Cue (segmen teks dengan timing dan payload).

1. Format Cue

Sebuah cue memiliki struktur berikut:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [pengaturan cue]
Payload teks...

• Timing: Waktu mulai & selesai dalam format HH:MM:SS.mmm.
• Pengaturan (opsional):
  • vertical (lr/rl untuk teks vertikal)
  • line (posisi)
  • position (penyelarasan horizontal)
  • size (lebar/persentase)
  • align (start/middle/end)

2. Payload Cue

• Bisa berupa teks biasa atau menyertakan markup:
  • Tag: <b>, <i>, <u>, <ruby>, <lang>, dll.
  • Timestamp (<00:00:05.000>) untuk teks gaya karaoke.

3. Styling & CSS

• Styling dapat diterapkan melalui:
  • Cue inline (menggunakan tag).
  • Pseudo‑elemen CSS (::cue, ::cue-region) di HTML.

4. Trek Metadata

• WebVTT dapat membawa metadata (JSON, dll.) untuk aplikasi interaktif.

5. Encoding File

• Harus dienkode UTF-8.
• Baris berakhir dengan \r\n, \n, atau \r.

6. Aturan Pemrosesan

• Parser harus menangani file yang tidak terformat dengan baik secara elegan.
• BOM (Byte Order Mark) bersifat opsional.

7. Integrasi HTML5

• Digunakan dengan elemen <track>:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind dapat berupa subtitles, captions, descriptions, chapters, atau metadata.

8. Dukungan Browser

• Didukung secara luas di browser modern (Chrome, Firefox, Safari, Edge).

9. Kasus Penggunaan

• Subtitle/Caption untuk aksesibilitas.
• Lirik karaoke dengan teks berwaktu.
• Navigasi bab dalam video.
• Metadata untuk aplikasi video interaktif.

Contoh File WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Selamat datang di tutorial kami tentang WebVTT.

00:00:04.000 --> 00:00:08.000
Di video ini, Anda akan belajar cara menambahkan subtitle ke video HTML5 Anda.

Mesin pencari tidak dapat “menonton” video Anda—tetapi mereka dapat membaca konten berbasis teks. Dengan menggunakan file WebVTT, Anda menambahkan teks yang dapat diindeks yang:

• Meningkatkan ketertemuan: Google dapat mengindeks caption dan transkrip, sehingga video Anda muncul di lebih banyak hasil pencarian.
• Meningkatkan keterlibatan: Video bersubtitle membuat pengguna tetap terlibat lebih lama—meningkatkan durasi sesi dan mengurangi bounce rate.
• Meningkatkan aksesibilitas: Caption penting bagi pengguna yang tuli atau memiliki gangguan pendengaran, dan juga disukai dalam algoritma peringkat SEO.

Ketika file WebVTT terkait dengan video di sebuah halaman web, Google dapat mengurai dan memahami teks berwaktu tersebut, menjadikan konten lebih relevan untuk kueri tertentu.

Cara Menambahkan WebVTT ke Video HTML5

Anda dapat menyertakan file WebVTT dalam video menggunakan elemen <track>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: Jalur ke file .vtt Anda
• kind: Jenis trek teks (subtitles, captions, chapters, dll.)
• srclang: Kode bahasa (misalnya en, es)
• label: Label trek yang ditampilkan di pemutar

WebVTT vs SRT: Apa Bedanya?

Alat untuk Membuat dan Mengedit File WebVTT

Anda dapat membuat atau mengedit file .vtt menggunakan:

• Editor Teks: VS Code, Sublime Text
• Editor Subtitle: Subtitle Edit, Amara, Aegisub
• Konverter: Gunakan alat untuk mengonversi SRT ke VTT dan sebaliknya

Cara Membuka File WebVTT?

Untuk membuka file WebVTT (.vtt), Anda dapat menggunakan editor teks atau editor subtitle apa saja.

Membuka di Editor Teks

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Karena file .vtt berupa teks biasa, Anda dapat melihat dan mengeditnya seperti file teks biasa lainnya.

Membuka di Editor Subtitle

Untuk format yang lebih baik, pratinjau, dan sinkronisasi:

• Subtitle Edit (Windows)
• Aegisub (lintas platform)
• Amara (berbasis web)

Membuka di Browser

1. Buat file HTML sederhana dengan tag <video> dan <track>.
2. Buka file HTML tersebut di browser untuk melihat video dengan subtitle.

Karakteristik Utama File VTT

FAQ

T1: Apa perbedaan antara WebVTT dan SRT?

J: WebVTT berakar dari SRT tetapi menambahkan fitur penting seperti penempatan teks, tag suara, styling CSS, dan dukungan metadata, serta integrasi native dengan video HTML5.

T2: Bagaimana cara menambahkan subtitle WebVTT ke YouTube?

J: Unggah file .vtt Anda saat menambahkan subtitle ke video, atau gunakan caption otomatis YouTube dan unduh file WebVTT yang dihasilkan untuk diedit.

T3: Bisakah file WebVTT menyertakan gambar?

J: Spesifikasi WebVTT tidak secara langsung mendukung gambar tersemat, tetapi Anda dapat menggunakan cue metadata dengan URL dan menerapkan rendering gambar khusus melalui JavaScript.

T4: Mengapa style WebVTT saya tidak diterapkan?

J: Pastikan blok STYLE muncul sebelum cue pertama, tidak ada baris kosong di dalamnya, dan gunakan pseudo‑elemen ::cue dengan benar. Juga periksa kompatibilitas browser.

T5: Apakah file WebVTT bekerja dengan protokol streaming seperti HLS?

J: Ya, HLS (HTTP Live Streaming) mendukung WebVTT tersegmentasi untuk streaming caption yang efisien bersamaan dengan konten video.

Referensi

• WebVTT: The Web Video Text Tracks Format