Video subtitrlari: track, WebVTT va media accessibility

Qisqacha: Videoga subtitr track elementi bilan ulanadi, subtitrlar esa WebVTT (.vtt) degan oddiy matnli faylda yoziladi: vaqt oralig'i va shu paytda chiqadigan matn. Trek turini kind atributi aytadi: tarjima (subtitles), eshitmaydiganlar uchun to'liq izoh (captions) yoki boblar (chapters). Audio va video uchun sahifadagi matnli nusxa — transkript — ham kerak.

Bu darsda

• Videoga track bilan subtitr ulaysiz.
• WebVTT faylini o'zingiz yozasiz.
• subtitles va captions farqini tushuntira olasiz.
• srclang, label va default ni to'g'ri qo'yasiz.
• Transkript va boshqa media accessibility talablarini bilasiz.

Oldin bilishingiz kerak: video va audio.

1. Nega bu kerak?

Rustam akaning osh damlash haqidagi videosi saytda. Kim uni to'liq tushuna olmaydi?

• Eshitmaydigan yoki kam eshitadigan odamlar — ular uchun ovoz yo'q.
• Avtobusdagi Jasur — quloqchini yo'q, ovozni yoqa olmaydi. Ijtimoiy tarmoqlardagi videolarning katta qismi ovozsiz ko'riladi.
• Rus yoki ingliz tilli mehmon — o'zbek tilini tushunmaydi.
• Shovqinli joydagi yoki tinch kutubxonadagi har kim.

Subtitrlar bularning hammasiga yordam beradi. Ular faqat "nogironlar uchun qo'shimcha" emas — ular videoni ko'proq odam ko'rishiga imkon beradi.

2. WebVTT fayli

Subtitrlar alohida matnli faylda yoziladi. Uning formati — WebVTT (Web Video Text Tracks), kengaytmasi .vtt. assets/video/ papkasida osh-damlash.uz.vtt faylini yarating:

WEBVTT

00:00:01.000 --> 00:00:04.000
Assalomu alaykum! Bugun osh damlaymiz.

00:00:04.500 --> 00:00:08.000
Avval qozonda yog'ni yaxshilab qizdiramiz.

00:00:08.500 --> 00:00:12.000
Piyozni solamiz — qizarguncha qovuramiz.

Tuzilishi:

• WEBVTT — birinchi qator, majburiy. Brauzer faylni shu so'zdan taniydi.
• Bo'sh qator — har bir yozuvni ajratadi.
• Vaqt oralig'i — soat:daqiqa:soniya.millisekund, o'rtada -->. Matn shu oraliqda ekranda turadi.
• Matn — bir yoki ikki qator.

Har bir "vaqt + matn" bloki cue (inglizcha "ishora", "replika") deyiladi. Soat nol bo'lsa, uni tushirib yozish mumkin: 00:01.000 --> 00:04.000.

Faylni UTF-8 kodlashda saqlang — VS Code shunday qiladi. Aks holda o'zbekcha harflar va apostroflar buziladi (Hujjat skeleti darsidagi mojibake muammosi).

Bo'sh joyni to'ldiring: WebVTT faylining birinchi qatori —

3. track — videoga ulash

<video controls width="640" height="360"
       poster="assets/images/osh-video-poster.jpg">
  <source src="assets/video/osh-damlash.mp4" type="video/mp4">
  <track src="assets/video/osh-damlash.uz.vtt"
         kind="captions" srclang="uz" label="O'zbekcha" default>
  <track src="assets/video/osh-damlash.ru.vtt"
         kind="subtitles" srclang="ru" label="Русский">
</video>

track — bo'sh element, source lardan keyin yoziladi. Atributlari:

default — boolean atribut: shu trek video bilan birga avtomatik yoqiladi. Qolgan treklarni foydalanuvchi pleyerdagi "CC" yoki subtitr tugmasi orqali tanlaydi.

label — foydalanuvchi o'qiydigan nom, shuning uchun uni o'sha tilning o'zida yozish qulay: "O'zbekcha", "Русский", "English".

Diqqat: Sahifani ikki marta bosib, file:// orqali ochsangiz, Chrome subtitr faylini yuklamaydi — xavfsizlik qoidalari tufayli. Subtitrlarni Live Server orqali tekshiring (Birinchi sahifa darsidagi http://127.0.0.1:5500).

4. Trek turlari: kind

4.1 subtitles va captions — asosiy farq

Ikkalasi ham ekranda matn chiqaradi. Lekin ular turli odamlar uchun:

captions uchun cue'lar shunday bo'ladi:

WEBVTT

00:00:04.500 --> 00:00:08.000
[qozonda yog' shivirlaydi]
RUSTAM AKA: Avval yog'ni yaxshilab qizdiramiz.

00:00:20.000 --> 00:00:23.000
[eshik ochiladi, kulgi]

Eshitmaydigan odam uchun "shivirlash" ham ma'lumot: yog' qizidi. "Kulgi" — kayfiyat. Bular subtitles da bo'lmaydi, captions da esa — shart.

4.2 Boshqa turlar

• chapters — boblar. Uzun videoni qismlarga bo'lish: "Zirvak", "Guruch solish", "Dam". Ba'zi pleyerlar ular bo'yicha sakrash imkonini beradi.
• descriptions — ko'rmaydiganlar uchun videodagi harakatlarning matnli tavsifi. Brauzerlarda qo'llab-quvvatlanishi hozircha cheklangan.
• metadata — JavaScript uchun ma'lumot, foydalanuvchiga ko'rinmaydi.

Boblar fayli oddiy WebVTT, faqat har bir cue — bob nomi:

WEBVTT

00:00:00.000 --> 00:01:30.000
Zirvak tayyorlash

00:01:30.000 --> 00:03:00.000
Guruch solish va dam berish

Tekshirib ko'ring: Choyxona videosida hech kim gapirmaydi — faqat qozon, olov va musiqa. Subtitr kerakmi?

5. Transkript — matnli nusxa

Transkript — video yoki audiodagi hamma nutq va muhim tovushlarning sahifadagi to'liq matni. U subtitrdan farqli ravishda vaqtga bog'lanmagan — oddiy matn:

<h2>Video matni</h2>
<p><strong>Rustam aka:</strong> Assalomu alaykum! Bugun osh
damlaymiz. Avval qozonda yog'ni yaxshilab qizdiramiz.</p>
<p>[Qozonda yog' shivirlaydi.]</p>
<p><strong>Rustam aka:</strong> Piyozni solamiz — qizarguncha
qovuramiz.</p>

Transkript kimga kerak:

• Audio (podkast) tinglovchilari orasidagi eshitmaydiganlar — audio ga subtitr qo'shib bo'lmaydi, transkript — yagona yo'l.
• Ko'r va kar foydalanuvchilar — ular matnni Brayl displeyida o'qiydi.
• Shoshayotgan odamlar — 10 daqiqalik videoni 1 daqiqada o'qib chiqadi.
• Google — video ichidagi nutqni tushunmaydi, transkriptni esa o'qiydi.

Uzun transkriptni ochiluvchi blokda yashirish mumkin — buni details va summary darsida ko'ramiz.

6. Media accessibility: asosiy qoidalar

Xalqaro accessibility standarti — WCAG (uni Accessibility nima darsida batafsil ko'ramiz) — video va audio uchun asosiy talablarni belgilaydi:

Oxirgi qoida jiddiy: tez miltillovchi tasvir ba'zi odamlarda tutqanoq (epileptik xuruj) keltirib chiqarishi mumkin. Videoni joylashdan oldin shunday effektlar bor-yo'qligini tekshiring.

Yaxshi xabar: brauzerning o'z pleyeri (controls) klaviatura bilan boshqariladi va ekran o'quvchi bilan ishlaydi. O'z dizayningizdagi pleyer yasaganingizda esa bu imkoniyatlarni o'zingiz ta'minlashingiz kerak bo'ladi.

7. Avtomatik subtitrlar haqida

YouTube va boshqa platformalar nutqdan avtomatik subtitr yaratadi. Bu yaxshi boshlanish, lekin:

• O'zbek tili uchun avtomatik tanib olish sifati ko'pincha past: so'zlar buziladi, tinish belgilari yo'q.
• Ismlar, taom nomlari, atamalar noto'g'ri yoziladi.
• Tovushlar ("[kulgi]") qo'shilmaydi — ya'ni bu captions emas.

Qoida: avtomatik subtitrni qoralama sifatida oling va har doim qo'lda tekshirib tuzating.

8. Ko'p uchraydigan xatolar

8.1 Bir nechta default

<track src="uz.vtt" kind="captions" srclang="uz"
       label="O'zbekcha" default>
<track src="ru.vtt" kind="subtitles" srclang="ru"
       label="Русский" default>

Nu HTML Checker:

Error: The “default” attribute must not occur on more than one “track” element within the same “audio” or “video” element.

Tarjimasi: "default atributi bitta audio yoki video ichida bir nechta track da bo'lmasligi kerak." Brauzer qaysi birini yoqishni bilmaydi. Tuzatish: default — faqat asosiy (odatda sahifa tilidagi) trekda.

8.2 Subtitr ko'rinmayapti

Uch tipik sabab:

1. Sahifa file:// orqali ochilgan — Live Server'dan oching.
2. .vtt fayl birinchi qatorida WEBVTT yo'q yoki vaqt formati xato (masalan, 00:01,000 — vergul bilan; to'g'risi nuqta: 00:01.000).
3. Trek boshqa saytda joylashgan — bunday holatda video va server qo'shimcha sozlamalarni talab qiladi. Eng oddiy yo'l — .vtt faylni video bilan bir saytda saqlash.

8.3 srclang yo'q

kind="subtitles" trekida srclang bo'lishi HTML standarti bo'yicha shart. Busiz pleyer trek tilini bilmaydi va foydalanuvchiga to'g'ri taklif qila olmaydi. Tuzatish: har bir trekka srclang va label.

8.4 Captions o'rniga faqat tarjima

O'zbekcha video uchun faqat ruscha subtitles bor. O'zbek tilini tushunadigan, lekin eshitmaydigan foydalanuvchi uchun hech narsa yo'q. Tuzatish: asl tildagi captions — birinchi navbatda.

9. Mashqlar

1-mashq (oson): Turini tanlang

1. Kar foydalanuvchi uchun nutq va tovushlar bilan matn — kind qiymati:
2. Ruscha tarjima —
3. Uzun videoning bo'limlari —

2-mashq (o'rta): WebVTT'dagi xatolar

00:00:01,000 -> 00:00:04,000
Assalomu alaykum!
00:00:04.000 --> 00:00:07.000
Bugun manti tayyorlaymiz.

WEBVTT

00:00:01.000 --> 00:00:04.000
Assalomu alaykum!

00:00:04.000 --> 00:00:07.000
Bugun manti tayyorlaymiz.

3-mashq (qiyin): Videoni hamma uchun ochiq qiling

1. O'tgan darsda qo'ygan ovozli videongiz uchun o'zbekcha captions faylini yozing (kamida 4 ta cue, bittasida tovush tavsifi).
2. Ruscha yoki inglizcha subtitles faylini qo'shing (tarjima taxminiy bo'lishi mumkin).
3. Video ostiga to'liq transkript yozing.
4. Live Server'da pleyerning subtitr menyusida ikkala trek ko'rinishini tekshiring.

<video controls width="640" height="360" preload="metadata"
       poster="../assets/images/osh-video-poster.jpg">
  <source src="../assets/video/osh-damlash.mp4" type="video/mp4">
  <track src="../assets/video/osh-damlash.uz.vtt"
         kind="captions" srclang="uz" label="O'zbekcha" default>
  <track src="../assets/video/osh-damlash.en.vtt"
         kind="subtitles" srclang="en" label="English">
  <p><a href="../assets/video/osh-damlash.mp4">Videoni yuklab
  oling</a></p>
</video>

<h2>Video matni</h2>
<p><strong>Rustam aka:</strong> Assalomu alaykum! ...</p>

10. Real ishda

• Ta'lim platformalari (shu jumladan onlayn kurslar) — video darslarga subtitr va transkript berish standart amaliyot. Talabalar ularni takrorlash va qidirish uchun ham ishlatadi.
• Ijtimoiy tarmoqlar — ko'p videolar ovozsiz ko'riladi, shuning uchun marketologlar subtitrlarni birinchi o'ringa qo'yadi.
• Qonunchilik. Ko'p davlatlarda davlat va ta'lim muassasalarining videolari uchun subtitrlar majburiy.
• Subtitr formatlari. Kino sanoatida SRT formati keng tarqalgan. U WebVTT'ga juda o'xshaydi (asosiy farq — vergul va WEBVTT sarlavhasi yo'qligi), va bittasini ikkinchisiga aylantirish oson.

Xulosa

• Subtitrlar — .vtt faylda: WEBVTT, bo'sh qator, 00:00:01.000 --> 00:00:04.000, matn.
• track: src, kind, srclang, label; default — faqat bitta trekda.
• subtitles — tarjima; captions — nutq + tovushlar + kim gapirayotgani (eshitmaydiganlar uchun).
• chapters — boblar; descriptions — vizual tavsif (qo'llab-quvvatlash cheklangan).
• Audio va video uchun transkript — hamma uchun va Google uchun foydali.
• Subtitrlarni Live Server'da tekshiring; avtomatik subtitrlarni har doim qo'lda tuzating.

Keyingi dars: iframe: boshqa sahifani joylash — YouTube videosi, xarita va boshqa saytlarni o'z sahifangiz ichida ko'rsatish.

Manbalar

• MDN: <track>, "Web Video Text Tracks Format (WebVTT)", "Adding captions and subtitles to HTML video" — developer.mozilla.org
• W3C WAI: "Making Audio and Video Media Accessible" — w3.org/WAI/media