Buat elemen track HTML
Atau tempel teks subtitle
Opsi
Subtitle ditujukan untuk penonton yang dapat mendengar audio dan membutuhkan kata-katanya — terjemahan, atau bahasa yang sama dalam bentuk tertulis. Caption ditujukan untuk penonton yang tidak dapat mendengarnya, sehingga caption juga memuat apa yang disampaikan suara kepada orang lain: musik, pintu, telepon berdering. File yang sama dapat melayani kedua tujuan, itulah sebabnya halaman ini bertanya alih-alih menebak, dan nilainya tidak dapat diubah kemudian dari dalam elemen. Description, chapter, dan metadata tidak ditawarkan: tidak satu pun dapat diisi dengan isi file subtitle.
Tag bahasa pendek seperti en, en-GB, atau pt-BR, yang menyebutkan bahasa kata-kata di subtitle, bukan bahasa video. Track yang menyebut dirinya subtitle wajib menyebutkan bahasa, jadi mengosongkan kotak ini kembali ke en alih-alih menghapus atributnya — dan karena setiap atribut dicetak di keluaran, Anda dapat melihat nilai cadangan itu sebelum menempel apa pun.
Teks bebas: English, English (SDH), Français. Inilah baris yang dipilih penonton ketika sebuah halaman menawarkan lebih dari satu track, jadi tulislah sebagaimana audiens Anda mengenalinya. Mengosongkan kotak menghapus atributnya sepenuhnya alih-alih menulis atribut kosong, yang mengembalikan penamaan kepada pemutar; label kosong akan menempatkan baris tanpa nama di menu itu.
Aktif, subtitle muncul begitu video diputar. Elemen media hanya boleh memiliki satu track bawaan, jadi biarkan mati ketika halaman sudah membawa satu: track kedua yang mengaku sebagai bawaan membuat pemutar memilih yang salah, sedangkan tidak menjadi bawaan hanya berarti penonton mengaktifkannya sendiri.
Frame rate yang dipakai untuk menghitung waktu. Di halaman format, inilah yang dibutuhkan MicroDVD, karena format itu menyimpan waktu sebagai nomor frame. Di halaman frame rate, ini adalah laju yang dipakai saat file diberi waktu — versi tempat subtitle dibuat — dan kotak kedua di halaman tersebut menerima laju video yang akan Anda gunakan bersama subtitle ini. 23,976, 24, 25, 29,97, 30, 50, 59,94, dan 60 adalah nilai yang umum. Nilai yang salah akan menggeser seluruh timeline, dan di halaman frame rate pergeserannya berupa rasio, bukan jumlah tetap.
Halaman ini menempatkan subtitle Anda di dalam satu elemen HTML yang bisa Anda tempel ke sebuah halaman. Hasilnya adalah satu baris `<track>` dengan WebVTT disisipkan langsung ke atribut `src`, sehingga teks subtitle ikut bersama markup itu sendiri — tidak ada file kedua yang harus diunggah, tidak ada path yang harus benar, dan tidak ada cara bagi pemutar untuk mencari sesuatu yang tidak ada.
Penyisipan itulah inti halaman ini, dan alasannya adalah cara peramban memperlakukan file lokal. Track diambil, bukan digambar, dan peramban menolak pengambilan itu ketika halaman sendiri dibuka dari disk; jadi `<track src="film.vtt">` pada halaman yang Anda simpan ke desktop tidak menampilkan apa pun: tidak ada pesan galat di layar, menu subtitle kosong, dan satu baris di konsol yang jarang dibuka orang. URI `data:` tidak pernah diambil — teksnya sudah duduk di atribut — sehingga bekerja di sana. Ongkosnya adalah ukuran, karena setiap spasi dan pemisah baris WebVTT menjadi tiga karakter, dan ongkos itu layak dibayar di sini: elemen ini ada supaya bisa bekerja sendiri.
Atributnya berasal dari kotak-kotak di panel, karena tidak satu pun bisa dibaca dari file Anda. `kind` paling penting: `subtitles` ditujukan bagi penonton yang tidak bisa mengikuti audio, sedangkan `captions` adalah versi lebih lengkap yang juga membawa musik dan efek suara bagi penonton yang tidak bisa mendengarnya. File penuh `[door slams]` dan not musik bisa jadi keduanya, dan hanya Anda yang tahu untuk penonton mana file itu dibuat — karena itu halaman ini bertanya, bukan menebak. Tiga atribut lainnya adalah bahasa teks, nama yang tampil di menu subtitle pemutar, dan apakah track harus terbuka sendiri.
Dua dari kotak itu berperilaku berbeda ketika dikosongkan, dan bedanya perlu diketahui. Mengosongkan nama menu menghapus atributnya sepenuhnya, karena label bersifat opsional dan menghilangkannya cukup menyerahkan pilihan kepada pemutar. Mengosongkan kotak bahasa tidak demikian: track yang menyatakan diri sebagai subtitle wajib menyebut bahasa, jadi kotak kosong jatuh ke `en` alih-alih menghasilkan elemen yang kehilangan sesuatu yang wajib dimilikinya. Keduanya bukan penggantian diam-diam — keluaran mencetak setiap atribut, sehingga Anda bisa melihat apa yang dihasilkan kotak-kotak Anda.
Teks subtitle di dalam elemen ditulis oleh penulis WebVTT yang sama dengan halaman konversi, yang berarti file yang datang sebagai WebVTT mempertahankan semua yang dibawanya di luar cue: teks pada baris `WEBVTT`, blok komentar dan gaya, serta pengaturan per cue yang menentukan posisi baris di layar. Tidak ada bagian dari file Anda yang diubah, dan tidak ada yang diunggah; kata-kata, waktu, dan pemformatannya keluar dalam keadaan seperti saat masuk.
Contoh
File SRT dengan kotak bawaan
Masukan
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Keluaran
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Satu baris keluar, dan seluruh file ada di dalamnya: %0A adalah pemisah baris dan %20 adalah spasi, jadi WebVTT ikut di atribut src alih-alih berada di file di samping halaman. Empat atribut itu berasal dari empat kotak — bahasa teks, baris yang dipilih penonton di menu subtitle pemutar, dan default, yang membuat track ini terbuka sendiri. Nomor cue dari SRT dipertahankan sebagai pengenal cue.
File WebVTT masuk sebagai WebVTT yang sama
Masukan
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Keluaran
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Semua yang dibawa file WebVTT di luar cue tetap bertahan: keterangan pada baris WEBVTT, blok NOTE, blok STYLE yang menentukan tampilan subtitle di pemutar, baris nama cue, dan pengaturan per cue align:start position:10% (%25 di sana adalah tanda persen, di-encode karena tanda persen telanjang tidak diizinkan di dalam URI). File yang masuk sebagai WebVTT keluar sebagai WebVTT yang sama. Dua kotak menyebut en-GB dan English (UK), karena salinan ini dibuat untuk audiens Britania — tidak ada apa pun di file yang menyatakannya.
Subtitle bagi penonton yang tidak bisa mendengar
Masukan
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Keluaran
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
File itu penuh efek suara dan musik, yang justru menjadi tujuan kind="captions" — subtitle bagi penonton yang tidak bisa mendengar — dan kotak itulah satu-satunya tempat hal itu bisa dinyatakan. Terpisah dari itu, nama menu diketik sebagai Tom & "the boss" dan keluar sebagai Tom & "the boss": tanda kutip yang tidak di-escape akan menutup atribut di situ juga dan mengubah sisa nama menjadi atribut kacau pada elemen.
Tiga kotak dikosongkan atau dimatikan
Masukan
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Keluaran
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Tiga kotak diubah, tiga hasil berbeda, karena HTML meminta hal yang berbeda. Nama menu hilang sepenuhnya dari elemen — sifatnya opsional, dan menghilangkannya menyerahkan keputusan kepada pemutar. Kotak bahasa kosong tetapi tetap menghasilkan srclang="en": track yang menyatakan diri sebagai subtitle harus menyebut bahasa, jadi tidak ada yang namanya bahasa kosong, dan nilai cadangan itu terlihat di keluaran. Sakelar default mati dan atribut itu juga hilang, sehingga track ini tidak akan terbuka sendiri — arah yang aman ketika satu halaman membawa lebih dari satu track.
Pertanyaan yang sering diajukan
Apakah saya masih perlu file .vtt di samping halaman saya?
Tidak, dan itu justru inti halaman ini. WebVTT ditulis ke atribut src sebagai URI data:, jadi elemen membawa subtitle-nya sendiri. Anda bisa menempelkannya ke halaman, mengirim file itu lewat email, atau memindahkannya ke folder lain dan subtitle tetap muncul. Satu hal yang perlu dijaga: semuanya adalah satu atribut — bila Anda menyalin hanya sebagian dari baris panjang itu, URI rusak dan track menjadi kosong.
Apakah elemen track ini bekerja bila file HTML dibuka langsung dari komputer saya?
Ya, dan kasus itulah alasan halaman ini menyisipkan subtitle. Ketika halaman dibuka dari disk, peramban menolak mengambil file track terpisah, sehingga track yang menunjuk ke film.vtt tidak menampilkan apa pun — tanpa galat yang terlihat, hanya menu subtitle kosong. URI data: tidak diambil sama sekali karena teksnya sudah ada di atribut, jadi hasilnya sama di desktop Anda maupun di server.
Mengapa keluaran halaman track HTML ini jauh lebih panjang daripada file subtitle saya?
Karena setiap karakter yang bukan huruf atau angka menjadi tiga karakter di dalam URI — spasi menjadi %20 dan pemisah baris menjadi %0A. File seratus kilobyte bisa menjadi beberapa ratus kilobyte. Base64 akan lebih pendek, sekitar sepertiga di atas ukuran asli alih-alih dua kali lipat, tetapi hasilnya menjadi dinding karakter yang tidak terbaca; dengan cara ini Anda masih bisa melihat atribut src dan mengenali dialog Anda sendiri di dalamnya, dan itu sepadan untuk file yang akan ditempel ke halaman lalu dirawat dengan tangan.
Mengapa atribut label hilang setelah kotak nama menu saya kosongkan?
Karena nama menu bersifat opsional di HTML, dan menghilangkannya bukan berarti “tanpa nama” — artinya pemutar yang memutuskan apa yang ditampilkan di menu subtitle, biasanya bahasanya. Mengosongkan kotak karena itu menghapus atributnya, bukan menulis atribut kosong, sebab label="" akan tampil sebagai baris kosong di menu itu. Anda bisa mengisi nama lagi kapan saja; nilainya string biasa dan tidak ada bagian lain di halaman yang bergantung padanya.
Apa bedanya subtitles dan captions pada kotak kind di halaman ini?
Siapa yang dilayani. Subtitles mengandaikan penonton bisa mendengar audio dan hanya membutuhkan kata-katanya di layar; captions mengandaikan penonton tidak bisa mendengarnya, sehingga juga membawa informasi yang sampai ke penonton pendengar lewat suara — musik, pintu, telepon berdering. Satu file bisa melayani kedua tujuan, dan teksnya sama, jadi halaman ini tidak bisa menebak maksud Anda. Nilainya juga tidak bisa diubah belakangan di dalam elemen, jadi pilihlah yang dibutuhkan audiens Anda.
Jenis track lain apa yang sengaja tidak disediakan untuk elemen ini?
Tiga: descriptions, yang menarasikan gambar bagi penonton yang tidak bisa melihatnya; chapters, yang merupakan navigasi dan bukan subtitle serta punya halaman sendiri di situs ini; dan metadata, yang tidak ditampilkan kepada siapa pun. Ketiganya tidak bisa diisi dengan isi file subtitle, jadi menawarkannya hanya akan membiarkan Anda membangun elemen yang tidak menampilkan apa pun. Dua yang disediakan adalah dua yang benar-benar bisa dilayani oleh file subtitle.
Apakah isi subtitle saya berubah saat dimasukkan ke elemen track HTML?
Teks, timing, dan pemformatan tidak berubah, dan file WebVTT mempertahankan blok komentar, gaya, serta region miliknya plus pengaturan per cue. Yang berubah adalah bentuknya: baris-baris ditulis ulang dalam sintaks WebVTT, yang dibaca pemutar, sehingga koma pada 00:00:01,000 di file SRT menjadi titik. Satu byte dibuang dengan sengaja — penanda di awal yang menyatakan file ber-encoding UTF-8, karena URI data sudah menyatakan encoding itu sendiri dan penanda tersebut akan muncul sebagai tiga karakter nyasar di depan.