Cara memasang subtitle VTT pada video HTML5

Jika video bisa diputar tetapi teks tidak muncul, bedakan kegagalan memuat trek dari kesalahan waktu tayang.

Hubungkan trek

Simpan video dan VTT berformat UTF-8 pada situs yang sama. Letakkan track di dalam video. Jalur relatif dihitung dari halaman. Isi srclang dengan bahasa teks, bukan otomatis bahasa rekaman, dan beri setiap trek label yang jelas.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

Uji satu trek di halaman sederhana

Unduh video demo dan VTT. Simpan bersama HTML di server uji dengan nama lesson.mp4 dan example-en.vtt sesuai contoh kode. Buka alamat web halaman agar pembatasan file lokal pada peramban tidak memengaruhi uji.

Contoh hanya memuat pengumuman lokakarya. Jeda pada detik ke-8 dan cocokkan kalimatnya. Pada detik ke-13 teks sudah harus hilang. Jika tetap muncul setelah subtitle dimatikan, periksa trek lain atau tulisan yang menyatu dengan gambar.

Telusuri permintaan file saat menu kosong

Buka panel Jaringan, muat ulang halaman, lalu pilih bahasa Inggris. Jika tidak ada permintaan .vtt, periksa elemen video pada halaman terbit; editor mungkin menghapus track ketika menyimpan. Jika ada, cocokkan URL lengkap dengan folder unggahan.

Baca isi respons. Seharusnya ada WEBVTT, baris kosong, lalu kode waktu. Halaman masuk juga bisa memberi status 200. Jika ada kesalahan CORS, uji file pada origin yang sama dengan halaman, lalu periksa origin yang diizinkan dan atribut crossorigin.

Cari potongan dari pola pergeseran waktu

Bandingkan awal tiga ucapan yang mudah dikenali dengan waktu mulai cue. Selisih yang sama mengarah ke perubahan intro. Jika hanya ucapan ketiga terlambat, telusuri potongan sesudah ucapan kedua. Bila selisih membesar, pastikan dulu versi video yang diputar.

Pada halaman terbit, pilih setiap bahasa, periksa satu kalimat, lalu matikan subtitle. Bandingkan tulisan yang tertinggal dengan video asli. Sertakan nama file, trek terpilih, dan waktu pemutaran dalam laporan masalah.

Contoh alur kerja

Suara sintetis bahasa Inggris dari naskah asli EasySub. Contoh ini mengadaptasi segmen ketiga SRT asli; bukan ekspor baru atau hasil penyuntingan profesional oleh manusia.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · Unduh video demo · SRT asli (Inggris)

Uji satu rentang waktu

Pilih English dan lompat ke detik kedelapan. Pada detik ketiga belas, kalimat contoh sudah hilang. Buka URL VTT langsung: halaman masuk dengan status 200 bukan berkas subtitle. Periksa text/vtt serta pengaturan crossorigin dan respons CORS bila domain berbeda.