Cara menggunakan dan membuat subtitle video HTML5

HTML5 memungkinkan kita menentukan subtitle untuk video menggunakan elemen. Berbagai properti elemen ini memungkinkan kita menentukan hal-hal seperti jenis konten yang kita tambahkan, bahasa yang digunakan, dan tentu saja referensi ke file teks yang berisi informasi subtitle sebenarnya.

 <id video=kontrol video> <source src=./step.mp4 type=video/mp4> <track label=中文字幕kind=subtitle bab metadata srclang=zh src=./caption.vtt default> <track label=ABC kind=subtitle srclang=de src=./caption1.vtt> <label trek=Nomor kind=subtitle srclang=es src=./caption2.vtt> </video>

• jenis diberi nilai subjudul, yang menunjukkan jenis konten yang terdapat dalam file.
• Label diberi nilai yang menunjukkan bahasa penulisan kumpulan subtitle ini - seperti bahasa Inggris atau Jerman - dan label ini akan muncul di antarmuka pengguna untuk memungkinkan pengguna dengan mudah memilih bahasa yang mereka inginkan untuk melihat subtitle tersebut.
• src dalam setiap kasus diberikan URL valid yang menunjuk ke file subtitle WebVTT yang relevan.
• srclang menunjukkan bahasa di mana konten setiap file subtitle berada.
• Atribut default diatur pada elemen Bahasa Inggris untuk menunjukkan kepada browser bahwa ini adalah definisi file subtitle default yang akan digunakan ketika subtitle diaktifkan dan pengguna belum membuat pilihan tertentu.

File yang berisi data subtitle sebenarnya adalah file teks sederhana yang mengikuti format tertentu, dalam hal ini format Web Video Text Track (WebVTT). Spesifikasi plug-in WebVTT masih dalam pengembangan, namun bagian utamanya stabil, sehingga kami dapat menggunakannya saat ini.

Penyedia video seperti Blender Foundation menyediakan subtitle dan subtitle dalam format teks untuk videonya, namun biasanya dalam format SubRip Text (SRT). Ini dapat dikonversi ke WebVTT menggunakan konverter online seperti srt2vtt.

Ekstensi filenya adalah ==.vtt==

==.vtt==Jenis file MIME adalah teks/vtt

Di bawah browser Chrome dan Firefox, subtitle .vtt dapat dimuat dan ditampilkan tanpa hambatan apa pun. Namun, untuk browser IE10+, meskipun subtitle .vtt juga didukung, jenis MIME perlu ditentukan, jika tidak, format WebVTT akan diabaikan. Cara yang lebih sederhana adalah dengan menambahkan file .htaccess di bawah folder tempat subtitle berada, dan menulis AddType text/vtt .vtt di dalamnya.

//Anda harus mendeklarasikan ==WEBVTT== di awal file

WEBVTT

//Waktu mulai-->Waktu berakhir, satuannya adalah milidetik

00:00:00.001 --> 00:00:03.000

// Menampilkan subtitle yang sesuai dengan waktu di atas. Gaya dapat diatur secara terpisah.

<v aa>Sembilan Nether Yinling 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>Dewa dan Setan 2222</v>

00:00:06.001 --> 00:00:09.000

Dengan tubuh darahku 3333

00:00:09.001 --> 00:00:12.000

Pengorbanan 4444

00:00:12.001 --> 00:00:15.000

Tiga nyawa dan tujuh nyawa 5555

Elemen semu ::cue adalah kunci untuk menargetkan isyarat trek teks individual untuk tujuan penataan gaya, karena cocok dengan isyarat yang ditentukan. Hanya ada beberapa properti CSS yang dapat diterapkan pada petunjuk teks:

• warna
• kegelapan
• visibilitas
• dekorasi teks
• bayangan teks
• kinerja steno latar belakang
• menguraikan kinerja steno
• atribut singkatan font
• tinggi garis
• ruang putih

==Catatan: ::gaya isyarat saat ini berfungsi di Chrome, Opera, dan Safari, namun belum di Firefox. ==

WebVTT juga mendukung beberapa tag HTML untuk kontrol gaya. Yang umum termasuk tag suara ==v==, tag warna ==c==, tag tebal ==b==, tag miring ==i==, dan garis bawah ==u. == tag, serta tag ==ruby== dan ==lang==, dll.

 //Mengatur gaya subtitle video::cue{ background-color:transparent; color:white; font-size:20px; line-height: 100px;}//Mengatur gaya subtitle satu baris video::cue( v[suara= aa]){ warna:hijau;}video::isyarat(v[suara=bb]){ warna:rgb(0, 26, 128);}

YAITU

Secara default, subtitle Internet Explorer 10+ diaktifkan, dan kontrol default berisi tombol dan menu yang menyediakan fungsionalitas yang sama dengan menu yang baru saja kita buat. Atribut default juga didukung.

==Catatan: IE akan sepenuhnya mengabaikan file WebVTT kecuali Anda menentukan tipe MIME. Ini dapat dilakukan dengan mudah dengan menambahkan file .htaccess ke direktori yang sesuai yang berisi AddType text/vtt .vtt==

Safari

Safari 6.1+ memiliki dukungan serupa untuk Internet Explorer 10+, menampilkan menu dengan opsi berbeda yang tersedia dan menambahkan opsi otomatis yang memungkinkan browser membuat pilihan.

Chrome dan Opera

Browser ini mempunyai implementasi serupa: subtitle diaktifkan secara default, dan set kontrol default berisi tombol 'cc' yang mengaktifkan dan menonaktifkan subtitle. Chrome dan Opera mengabaikan atribut pada elemen default dan malah mencoba mencocokkan bahasa browser dengan bahasa subtitle

Di atas adalah cara menggunakan dan membuat subtitle video HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!