Meningkatkan kebolehcapaian video dengan webvtt

"Kuasa rangkaian terletak pada kesejagatannya. Diakses oleh semua orang adalah penting, sama ada kurang upaya atau tidak." -Tim Berners-Lee

Kebolehcapaian adalah penting dalam pembangunan laman web. Oleh kerana kandungan video menjadi semakin popular, permintaan untuk kandungan sari kata juga berkembang. WebVTT adalah teknologi yang, sebagai format sari kata, boleh diintegrasikan dengan mudah ke dalam API web sedia ada, dengan itu menyelesaikan masalah kandungan sari kata.

Artikel ini akan membincangkan ini. Sudah tentu, WebVTT adalah sari kata pada tahap yang paling asas, tetapi ia boleh dilaksanakan dalam beberapa cara, menjadikan video (dan kandungan sari kata itu sendiri) lebih mudah untuk diakses kepada pengguna.

Pengenalan kepada format webvtt

Pertama: Webvtt adalah jenis fail yang mengandungi teks "Webvtt" dan garis sari kata dengan cap waktu. Contohnya adalah seperti berikut:

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鸟鸣声] - 真美好的一天！ 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的确如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

Sedikit pelik, tetapi masuk akal, bukan? Seperti yang anda lihat, baris pertama adalah "Webvtt", diikuti dengan julat masa baris ketiga (0 hingga 3 saat dalam kes ini). Julat masa diperlukan. Jika tidak, fail WebVTT tidak akan berfungsi, dan ia tidak akan memaparkan atau meremehkan kesilapan untuk memberitahu anda. Akhirnya, setiap baris di bawah julat masa mewakili sari kata yang terkandung dalam julat tersebut.

Ambil perhatian bahawa anda boleh memasukkan beberapa sari kata dalam julat satu masa. Hubung Hubung boleh digunakan untuk menunjukkan permulaan garis, tetapi ini tidak perlu, ia lebih daripada masalah gaya.

Julat masa boleh berada dalam salah satu daripada dua format: HH: MM: SS.TT atau MM: SS.TT. Setiap bahagian mengikuti peraturan tertentu:

• Jam (HH): Sekurang -kurangnya dua digit
• Minit (mm): Antara 00 dan 59 (termasuk)
• Seconds: Antara 00 dan 59 (termasuk)
• Milisaat (TT): Antara 000 dan 999 (termasuk)

Pada mulanya ini kelihatan agak menakutkan. Anda mungkin tertanya -tanya, siapa yang boleh menaip dan menyesuaikan semua ini secara manual. Nasib baik, terdapat alat yang memudahkan proses ini. Sebagai contoh, YouTube secara automatik boleh menambah subtitle video kepada anda menggunakan pengenalan suara, dan juga membolehkan anda memuat turun sarikata sebagai fail VTT! Tetapi itu bukan semua. WebVTT juga boleh digunakan dengan YouTube dengan memuat naik fail VTT anda ke video YouTube anda.

Sebaik sahaja fail ini dibuat, kami boleh membenamkannya ke dalam elemen video HTML5.

<code><video autoplay="autoplay" controls="controls" height="150" width="300"><track default="" kind="captions" label="English" src="your_caption_file.vtt" srclang="en"></track></video></code>

Tag ini agak seperti skrip yang "bermain" dengan video. Kita boleh menggunakan pelbagai trek dalam elemen video yang sama. Harta lalai menunjukkan bahawa trek akan diaktifkan secara automatik.

Dengan cara ini, mari kita lihat semua sifat:

• Srclang menunjukkan bahasa trek.
• Jenis mewakili jenis trek, terdapat lima jenis:
  • Sarikata biasanya terjemahan dan deskripsi bahagian -bahagian video yang berlainan.
  • Menggambarkan membantu pengguna dengan kemerosotan visual memahami apa yang sedang berlaku dalam video.
  • Sarikata menyediakan alternatif kepada audio untuk pengguna yang cacat pendengaran.
  • Metadata adalah trek yang digunakan oleh skrip dan tidak dapat dilihat oleh pengguna.
  • Bab membantu menavigasi kandungan video.
• Label adalah tajuk trek teks yang muncul di trek sarikata
• SRC adalah fail sumber untuk trek. Kecuali Crossorigin ditentukan, ia tidak boleh datang dari silang asal.

Walaupun webvtt direka untuk video, anda masih boleh meletakkan fail audio dengan meletakkannya<video></video> Gunakannya dalam elemen dengan audio.

Sangat meneroka struktur fail webvtt

MDN menyediakan dokumentasi yang sangat baik dan menggariskan struktur badan fail webvtt, yang mengandungi sehingga enam komponen. Berikut adalah pecahan MDN:

• Penandaan pesanan byte pilihan (bom)
• String "Webvtt"
• Tajuk teks pilihan di sebelah kanan Webvtt.
  • WebVTT mesti mempunyai sekurang -kurangnya satu ruang selepas itu.
  • Anda boleh menggunakannya untuk menambah penerangan ke fail.
  • Anda boleh menggunakan apa-apa selain garis baru atau rentetan "->" dalam tajuk teks.
• Garis kosong bersamaan dengan dua aksara baru berturut -turut.
• Sifar atau lebih arahan atau komen.
• Sifar atau lebih banyak baris kosong.

Nota: BOM adalah watak Unicode yang menunjukkan pengekodan unicode fail teks.

Bold, italic dan digariskan - oh tuhan saya!

Kami pasti boleh menggunakan beberapa format HTML sebaris dalam fail webvtt! Ini semua biasa kepada semua orang :, dan . Anda menggunakannya dengan cara yang sama anda berada di HTML.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start这是<b>粗体文本</b>00:00:03.000 --> 00:00:06.000 align:middle这是<i>斜体文本</i>00:00:06.000 --> 00:00:09.000 vertical:rl align:middle这是<u>下划线文本</u></code>

Tetapan segera

Tetapan prompt adalah rentetan teks pilihan yang digunakan untuk mengawal lokasi sari kata. Ia agak seperti elemen kedudukan dalam CSS, seperti dapat meletakkan sari kata pada video.

Sebagai contoh, kita boleh meletakkan sari kata di sebelah kanan masa yang cepat, mengawal sama ada sari kata dipaparkan secara mendatar atau menegak, dan menentukan bagaimana sari kata diselaraskan dan menegak.

Berikut adalah tetapan yang boleh kita gunakan.

Menetapkan 1: Baris

Talian mengawal kedudukan sari kata pada paksi-y. Jika menegak ditentukan (kita akan membincangkan kemudian), garis akan menunjukkan di mana sari kata akan dipaparkan pada paksi-x.

Integer dan peratusan adalah unit yang boleh diterima sepenuhnya apabila menentukan nilai baris. Sekiranya menggunakan bilangan bulat, jarak setiap baris akan sama dengan ketinggian baris pertama (dari perspektif mendatar). Oleh itu, sebagai contoh, katakan bahawa ketinggian baris pertama subtitle adalah sama dengan 50px, nilai baris yang ditentukan adalah 2, dan arah subtitle adalah mendatar. Ini bermakna sari kata akan diposisikan dari atas dengan 100px (50px kali 2), bersamaan dengan kebanyakan koordinat sempadan video. Jika kita menggunakan integer negatif, ia akan bergerak dari bawah apabila nilai berkurangan (atau, jika menegak: LR ditentukan, kita akan bergerak dari kanan ke kiri dan sebaliknya). Berhati-hati di sini, kerana sari kata boleh diletakkan di luar skrin dan tidak konsisten dalam pelayar yang berbeza. Semakin besar keupayaan, semakin besar tanggungjawab!

Dalam kes peratusan, nilai mestilah antara 0-100% (inklusif) (maaf, tidak ada nilai gergasi 200% di sini). Nilai yang lebih tinggi akan memindahkan sari kata dari atas ke bawah kecuali menegak: LR atau menegak: RL ditentukan, di mana sari kata akan bergerak pada paksi-x dengan sewajarnya.

Apabila nilai meningkat, sari kata akan muncul di bawah sempadan video. Apabila nilai berkurangan (termasuk nilai negatif), sari kata akan muncul di atas.

Sukar untuk membayangkan ini tanpa contoh, bukan? Inilah cara ini ditukar kepada kod:

 <code>00:00:00.000 --> 00:00:03.000 line:50%此字幕应水平放置在屏幕的大致中心。</code>

 <code>00:00:03.000 --> 00:00:06.000 vertical:lr line:50%此字幕应垂直放置在屏幕的大致中心。</code>

 <code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1此字幕应垂直放置在视频的左侧。</code>

 <code>00:00:09.000 --> 00:00:12.000 line:0字幕应水平放置在屏幕顶部。</code>

Menetapkan 2: Menegak

menegak menunjukkan bahawa sari kata akan dipaparkan secara menegak dan dipindahkan ke arah yang ditentukan oleh tetapan garis. Sesetengah bahasa tidak dipaparkan dari kiri ke kanan, tetapi perlu dipaparkan dari atas ke bawah.

<code> 00:00:00.000 --> 00:00:03.000 vertical:rl此字幕应垂直显示。</code>

 <code>00:00:00.000 --> 00:00:03.000 vertical:lr此字幕应垂直显示。</code>

Menetapkan 3: Kedudukan

Kedudukan Menentukan kedudukan di mana sari kata akan dipaparkan pada paksi-x. Jika menegak ditentukan, kedudukan sebaliknya akan menentukan kedudukan di mana sarikata akan dipaparkan pada paksi-y. Ia mestilah integer antara 0% dan 100% (inklusif).

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl position:100%此字幕将垂直显示并在底部。 00:00:03.000 --> 00:00:06.000 vertical:rl position:0%此字幕将垂直显示并在顶部。</code>

Pada ketika ini, anda mungkin melihat bahawa garis dan kedudukan adalah serupa dengan CSS Flexbox Properties Align-items dan Justify-Content, sementara menegak sangat mirip dengan arah flex. Satu helah untuk mengingati arah webvtt ialah garis menentukan kedudukan yang berserenjang dengan aliran teks, dan kedudukan menentukan kedudukan selari dengan aliran teks. Inilah sebabnya jika kita menentukan menegak, garis akan tiba -tiba bergerak di sepanjang paksi mendatar dan kedudukan akan bergerak di sepanjang paksi menegak.

Menetapkan 4: Saiz

Saiz menentukan lebar sari kata. Jika menegak ditentukan, ia akan menetapkan ketinggian sari kata. Seperti tetapan lain, ia mestilah integer antara 0% dan 100% (termasuk).

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl size:50%此字幕将垂直填充屏幕的一半。</code>

 <code>00:00:03.000 --> 00:00:06.000 position:0%此字幕将水平填充整个屏幕。</code>

Menetapkan 5: Align

Align Menentukan di mana teks akan muncul dalam arah mendatar. Jika menegak ditentukan, ia akan mengawal penjajaran menegak.

Nilai -nilai yang kita ada ialah: Mula, Tengah, Akhir, Kiri, dan Kanan. Sekiranya tiada menegak ditentukan, penjajaran itu betul -betul seperti yang mereka suka. Jika menegak ditentukan, mereka sebenarnya akan menjadi bahagian atas, tengah (menegak), dan bawah. Menggunakan permulaan dan akhir dan bukannya kiri dan kanan adalah cara yang lebih fleksibel untuk membolehkan penjajaran nilai teks biasa berdasarkan atribut CSS Unicode-Bidi.

Perhatikan bahawa Align tidak dipengaruhi oleh menegak: LR atau menegak: RL.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start此字幕将出现在屏幕左侧。 00:00:03.000 --> 00:00:06.000 align:middle此字幕将水平位于屏幕中央。 00:00:06.000 --> 00:00:09.000 vertical:rl align:middle此字幕将垂直位于屏幕中央。 00:00:09.000 --> 00:00:12.000 vertical:rl align:end此字幕将垂直位于屏幕的右下角，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 vertical:lr align:end此字幕将垂直位于屏幕底部，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 align:left此字幕将出现在屏幕左侧。 00:00:12.000 --> 00:00:15.000 align:right此字幕将出现在屏幕右侧。</code>

Komen Webvtt

Komen Webvtt adalah rentetan teks yang hanya dapat dilihat apabila membaca teks sumber fail, sama seperti komen yang kita fikirkan dalam HTML, CSS, JavaScript, dan bahasa lain. Komen boleh mengandungi rehat garis, tetapi bukan garis kosong (pada dasarnya dua baris baru).

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鸟鸣声] - 真美好的一天！ NOTE 这是一个注释。观看字幕的任何人都不会看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的确如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

Apabila parsing dan menjadikan fail sari kata, garis yang diserlahkan di atas akan tersembunyi sepenuhnya di hadapan pengguna. Komen juga boleh menjadi multi-line.

Terdapat tiga watak/rentetan yang sangat penting untuk diperhatikan dan mereka tidak boleh digunakan untuk komen:. Sebagai alternatif, anda boleh menggunakan watak melarikan diri.

Beberapa ciri webvtt lain yang menarik

Kami akan melihat dengan cepat beberapa cara yang sangat bijak untuk menyesuaikan dan mengawal sari kata, tetapi sekurang -kurangnya pada masa penulisan, kaedah ini tidak mempunyai sokongan penyemak imbas yang konsisten.

Ya, kita boleh gaya sari kata!

Malah, sari kata WebVTT boleh digayakan. Sebagai contoh, untuk menetapkan latar belakang sari kata menjadi merah, tetapkan harta latar belakang pada :: Cue Pseudo-Element:

 <code>video::cue { background: red; }</code>

Ingat kita boleh menggunakan beberapa format html sebaris dalam fail webvtt? Nah, kita juga boleh memilihnya. Sebagai contoh, pilih elemen italik ():

 <code>video::cue(i) { color: yellow; }</code>

Ternyata Fail WebVTT Blok Gaya Sokongan, yang sangat mirip dengan fail HTML:

 <code>WEBVTT STYLE ::cue { color: blue; font-family: "Source Sans Pro", sans-serif; }</code>

Unsur -unsur juga boleh diakses melalui pengenal segera mereka. Perhatikan bahawa pengenal cepat menggunakan mekanisme melarikan diri yang sama seperti HTML.

 <code>WEBVTT STYLE ::cue(#middle\ cue\ identifier) { text-decoration: underline; } ::cue(#cue\ identifier\ \33) { font-weight: bold; color: red; } first cue identifier 00:00:00.000 --> 00:00:02.000你好，世界！ middle cue identifier 00:00:02.000 --> 00:00:04.000此提示标识符将带有下划线！ cue identifier 3 00:00:04.000 --> 00:00:06.000这个不会受到影响，就像第一个一样！</code>

Pelbagai jenis tag

Banyak tag boleh digunakan untuk memformat sari kata. Ada amaran. Tag ini tidak boleh digunakan dalam elemen dengan bab atribut yang baik. Berikut adalah beberapa tag diformat yang boleh anda gunakan.

Tag kelas

Kita boleh menggunakan tag kelas untuk menentukan kelas dalam tag Webvtt, dan kita boleh menggunakan CSS untuk memilih kelas ini. Katakan kita mempunyai kelas. Yanellowish yang menjadikan teks kuning. Kita boleh menggunakan tag ini dalam sarikata. Kita boleh mengawal banyak gaya dengan cara ini, seperti fon, warna fon dan warna latar belakang.

 <code>/* 我们的CSS 文件*/ .yellowish { color: yellow; } .redcolor { color: red; }</code>

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本应为黄色。此文本将为默认颜色。 00:00:03.000 --> 00:00:06.000此文本应为红色。此文本将为默认颜色。</code>

Tag timestamp

Jika anda ingin membuat sari kata muncul pada masa tertentu, anda perlu menggunakan tag timestamp. Mereka seperti sari kata penalaan halus ke titik tepat pada waktunya. Masa tag mesti berada dalam julat masa tertentu subtitle, dan setiap tag timestamp mestilah lebih lambat daripada yang sebelumnya.

 <code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本将显示超过6 秒。</code>

Tag suara

Tag suara adalah ringkas kerana mereka membantu mengenal pasti siapa yang bercakap.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000鲍勃，你今天过得怎么样？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>

Tag Ruby

Tag Ruby adalah cara untuk memaparkan aksara komen kecil di atas sari kata.

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000</code> Sari kata ini akan mempunyai teks yang dipaparkan di atasnya<rt> Teks ini akan dipaparkan di atas sari kata.</rt>

kesimpulannya

Itu sahaja mengenai Webvtt! Ini adalah teknologi yang sangat berguna yang memberi peluang untuk meningkatkan kebolehcapaian laman web anda, terutamanya jika anda menggunakan video. Cuba tulis beberapa sari kata untuk mendapatkan idea yang lebih baik!

Atas ialah kandungan terperinci Meningkatkan kebolehcapaian video dengan webvtt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!