Bagaimana anda boleh memberikan kapsyen dan sari kata untuk video menggunakan & lt; trek & gt; unsur?

Artikel ini menerangkan cara menggunakan & lt; trek & gt; Elemen untuk menambah kapsyen dan sari kata kepada video HTML5, memberi tumpuan kepada pelaksanaan, kebolehcapaian, penyesuaian, dan format yang disokong.

Bagaimanakah anda dapat memberikan kapsyen dan sari kata untuk video menggunakan elemen & trek>?

Untuk memberikan kapsyen dan sari kata untuk video menggunakan elemen <track></track> , anda perlu mengikuti struktur tertentu dalam HTML anda. Elemen <track></track> digunakan bersempena dengan elemen <video></video> untuk menambah trek teks masa, yang boleh menjadi sari kata, kapsyen, bab, penerangan, atau metadata. Inilah cara anda boleh melaksanakannya:

1. Struktur HTML : Letakkan elemen <track></track> sebagai kanak -kanak dari elemen <video></video> . Elemen <track></track> perlu diletakkan selepas elemen sumber video.

2. Atribut : Elemen <track></track> menggunakan beberapa atribut untuk menentukan tingkah laku dan kandungannya:

   • kind : Menentukan jenis trek teks. Untuk sari kata dan kapsyen, gunakan "subtitle" atau "kapsyen" masing -masing.
   • src : menunjuk kepada fail WebVTT yang mengandungi sari kata atau kapsyen sebenar.
   • srclang : Menentukan bahasa trek teks. Ini diperlukan jika kind ditetapkan kepada "sari kata".
   • label : Menyediakan tajuk yang boleh dibaca pengguna untuk trek. Ini berguna untuk penyemak imbas untuk memaparkan pilihan untuk bahasa yang berbeza atau jenis trek.
   • default : Jika hadir, atribut ini menyatakan bahawa trek harus diaktifkan kecuali keutamaan pengguna menunjukkan sesuatu yang berbeza.

Berikut adalah contoh bagaimana anda boleh menambah sari kata dan kapsyen ke video:

 <code class="html"><video controls> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions" default> </track></track></source></video></code>

Dalam contoh ini, subtitles_en.vtt dan captions_en.vtt adalah fail webvtt yang mengandungi teks sebenar yang akan dipaparkan.

Apakah amalan terbaik untuk memastikan kebolehcapaian dengan kapsyen video menggunakan elemen & trek>?

Memastikan kebolehcapaian dengan kapsyen video menggunakan elemen <track></track> melibatkan beberapa amalan terbaik:

1. Menyediakan pelbagai pilihan bahasa : Sertakan trek untuk bahasa yang berbeza untuk memenuhi khalayak yang pelbagai. Gunakan atribut srclang untuk menentukan bahasa setiap trek.
2. Gunakan label deskriptif : Gunakan atribut label untuk menyediakan label yang jelas dan deskriptif untuk setiap trek. Ini membantu pengguna memahami pilihan yang ada, terutamanya jika pelbagai bahasa atau jenis trek tersedia.
3. Melaksanakan kapsyen dan sari kata dengan betul : Gunakan kind="captions" untuk kapsyen yang dimaksudkan untuk penonton pekak atau keras, yang harus termasuk unsur-unsur bukan ucapan seperti kesan bunyi dan muzik. Gunakan kind="subtitles" untuk dialog yang diterjemahkan.
4. Pastikan Penyegerakan : Masa kapsyen dan sari kata mestilah tepat untuk dipadankan dengan audio. Ini memastikan penonton dapat dengan mudah mengikuti.
5. Ciri -ciri Kebolehcapaian : Pertimbangkan ciri -ciri tambahan seperti keupayaan untuk menyesuaikan saiz, warna, dan latar belakang teks melalui CSS untuk memenuhi pelbagai keperluan pengguna.
6. Ujian : Secara kerap menguji kapsyen dan sari kata pada pelayar dan peranti yang berbeza untuk memastikan ia berfungsi dengan betul dan boleh diakses oleh semua pengguna.
7. Kandungan Fallback : Sediakan teks atau alternatif transkrip untuk pengguna yang tidak dapat mengakses kandungan video untuk apa -apa sebab. Ini boleh dihubungkan dalam elemen video atau disediakan pada halaman.

Bagaimana anda menyesuaikan penampilan sari kata yang ditambahkan melalui elemen & trek> dalam video HTML5?

Menyesuaikan penampilan sari kata yang ditambahkan melalui elemen <track></track> dalam video HTML5 biasanya dilakukan melalui CSS. Anda boleh menargetkan ::cue Pseudo-elemen untuk gaya teks dan latar belakangnya. Berikut adalah langkah dan contoh untuk penyesuaian:

1. Menargetkan isyarat : Gunakan Pseudo-Element ::cue untuk gaya teks di dalam trek.

2. Pilihan Styling : Anda boleh mengubah suai sifat berikut untuk menyesuaikan penampilan:

   • color : Mengubah warna teks.
   • background-color : Perubahan warna latar belakang kotak teks.
   • text-shadow : Menambah bayangan ke teks untuk dibaca yang lebih baik.
   • font : Perubahan keluarga fon, saiz, dan gaya.

Berikut adalah contoh CSS yang menyesuaikan penampilan sari kata:

 <code class="css">::cue { color: #ffffff; background-color: rgba(0, 0, 0, 0.6); font-family: Arial, sans-serif; font-size: 18px; text-shadow: 1px 1px 2px black; }</code>

CSS ini akan mengubah warna teks menjadi putih, memohon latar belakang hitam separa telus, menetapkan font ke Arial, meningkatkan saiz fon, dan menambah bayangan teks untuk kontras yang lebih baik.

Apakah bahasa dan format yang & trek> sokongan elemen untuk sari kata dan kapsyen video?

Elemen <track></track> menyokong pelbagai bahasa dan format untuk sari kata dan kapsyen video:

1. Bahasa : Elemen <track></track> boleh menyokong mana -mana bahasa manusia, seperti yang ditentukan oleh atribut srclang . Nilai srclang harus menjadi tag bahasa BCP 47 yang sah, yang boleh merangkumi kod untuk bahasa, dialek, dan wilayah (misalnya, "en" untuk bahasa Inggeris, "fr" untuk bahasa Perancis, "es-mx" untuk bahasa Sepanyol seperti yang dituturkan di Mexico).

2. Format : Format utama yang disokong oleh elemen <track></track> ialah WebVTT (trek teks video web). WebVTT adalah format teks mudah untuk memaparkan trek teks masa yang disegerakkan dengan kandungan video.

   Berikut adalah contoh asas struktur fail webvtt:

    <code class="vtt">WEBVTT 00:00:00.000 --> 00:00:05.000 This is the first caption. 00:00:05.001 --> 00:00:10.000 This is the second caption.</code>

   Walaupun WebVTT adalah format yang paling banyak disokong, elemen <track></track> berpotensi boleh menyokong format lain seperti TTML (bahasa markup teks masa) dan SRT (subrip subtitle) melalui sambungan pelayar atau polyfills, walaupun ini kurang biasa digunakan secara langsung dengan elemen <track></track> .

Dengan mengikuti garis panduan dan amalan ini, anda boleh menyediakan, menyesuaikan, dan memastikan kebolehcapaian kapsyen dan sari kata untuk kandungan video anda menggunakan elemen <track></track> .

Atas ialah kandungan terperinci Bagaimana anda boleh memberikan kapsyen dan sari kata untuk video menggunakan & lt; trek & gt; unsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!