HTML video va audio: controls, source, poster va autoplay qoidalari

Qisqacha: video va audio sahifaga brauzerning o'z pleyerini qo'yadi — controls atributi uning tugmalarini ko'rsatadi. Bir nechta source bilan formatlarni zaxira bilan berasiz (WebM, keyin MP4). poster — video boshlanguncha ko'rinadigan rasm. Ovozli video o'z-o'zidan boshlanmaydi: brauzerlar faqat muted (ovozsiz) videoni avtomatik ijro etishga ruxsat beradi.

Bu darsda

• video va audio ni controls bilan sahifaga qo'yasiz.
• Bir nechta source va type bilan formatlarni to'g'ri berasiz.
• poster, preload, width/height ni video uchun ishlatasiz.
• Autoplay qoidalarini va muted + playsinline naqshini tushunasiz.
• Brauzer videoni ko'rsata olmasa nima chiqishini hal qilasiz.

Oldin bilishingiz kerak: Rasm qo'yish: img asoslari, Audio va video formatlari.

1. Nega bu kerak?

Choyxona oshpazi Rustam aka qozonda osh damlayotgan qisqa video oldi. Uni saytga qo'yish kerak. Yana bir g'oya — bosh sahifaga choyxona haqida qisqa audio-hikoya.

2010-yillargacha buning uchun Flash kerak edi — o'tgan darsda uning tarixini ko'rdik. Bugun HTML'ning o'zida ikkita teg bor: video va audio. Brauzer o'zining tayyor pleyerini beradi: ijro, pauza, ovoz, to'liq ekran. Siz faqat faylni va xatti-harakatni belgilaysiz.

2. video — eng oddiy shakl

<video src="assets/video/osh-damlash.mp4" controls
       width="640" height="360">
</video>

• src — video fayl manzili.
• controls — pleyer tugmalarini ko'rsat. Bu boolean atribut.
• width va height — xuddi rasmdagidek: brauzer joyni oldindan ajratadi, sahifa sakramaydi.

controls siz video ekranda turadi, lekin foydalanuvchi uni ishga tushira olmaydi (JavaScript bilan boshqarilmasa). Shuning uchun deyarli har doim controls yoziladi.

Pleyerning ko'rinishi brauzerga qarab farq qiladi: Chrome'da boshqacha, Safari'da boshqacha. O'z dizayningizdagi pleyerni JavaScript bilan yasash mumkin — buni keyinroq ko'rasiz.

3. Bir nechta format: source

3.1 Konteyner va kodek

Audio va video formatlari darsida ko'rdik: video fayl — konteyner (MP4, WebM), uning ichida esa kodek (H.264, VP9, AV1) — haqiqiy siqish usuli. Brauzer ikkalasini ham tushunishi kerak.

Bugungi amaliy holat:

3.2 Zaxirali zanjir

picture darsidagi g'oya bu yerda ham ishlaydi: bir nechta source, brauzer tushunadigan birinchisini oladi:

<video controls width="640" height="360">
  <source src="assets/video/osh-damlash.webm" type="video/webm">
  <source src="assets/video/osh-damlash.mp4" type="video/mp4">
  <p>Brauzeringiz videoni ko'rsata olmadi.
  <a href="assets/video/osh-damlash.mp4">Videoni yuklab oling</a>.</p>
</video>

• source lar yuqoridan pastga tekshiriladi. Kichikroq WebM birinchi, universal MP4 — zaxira.
• type — MIME turi. Brauzer faylni yuklamasdan "buni bilamanmi?" deb hal qiladi.
• Diqqat: video ichidagi source — src bilan. picture ichidagi source esa srcset bilan edi. Bu chalkashlikni picture darsida ogohlantirgan edik.

Eng oxirgi paragraf — zaxira kontent. U faqat video tegini umuman tanimaydigan juda eski brauzerda ko'rinadi. Unda videoni yuklab olish havolasini berish yaxshi odat.

Maslahat: Bitta format bilan cheklanmoqchi bo'lsangiz — MP4 (H.264) ni tanlang. U deyarli hamma joyda ishlaydi. WebM — trafikni tejash uchun qo'shimcha.

4. poster va preload

4.1 poster — video boshlanguncha

Video ijro etilmaguncha, uning o'rnida odatda birinchi kadr ko'rinadi — ko'pincha qora ekran yoki tasodifiy kadr. poster o'rniga o'zingiz tanlagan rasmni qo'yadi:

<video controls width="640" height="360"
       poster="assets/images/osh-video-poster.jpg">
  <source src="assets/video/osh-damlash.mp4" type="video/mp4">
</video>

Poster — videoning "muqovasi". Yaxshi poster foydalanuvchini ijro tugmasini bosishga undaydi.

4.2 preload — oldindan qancha yuklash

Video fayllar katta — o'nlab megabayt. Foydalanuvchi videoni umuman ko'rmasligi mumkin. preload brauzerga maslahat beradi:

Mobil foydalanuvchilar trafigini tejash uchun preload="none" yoki preload="metadata" yaxshi tanlov. Bu — maslahat, brauzer uni o'z bilganicha ishlatishi mumkin.

Bo'sh joyni to'ldiring: video boshlanguncha ko'rinadigan rasm qaysi atributda?

5. Autoplay qoidalari

5.1 Nega ovozli video o'zi boshlanmaydi

Sahifani ochdingiz — va birdan baland ovozli reklama. Yoqimsizmi? Brauzerlar ham shunday deb hisoblaydi. Shuning uchun zamonaviy brauzerlarda qoida qat'iy:

• Ovozli videoni o'z-o'zidan ijro etish (autoplay) odatda bloklanadi. Foydalanuvchi avval sahifa bilan o'zaro ta'sirda bo'lishi kerak.
• Ovozsiz (muted) video esa o'z-o'zidan boshlanishi mumkin.

Aniq qoidalar brauzerga va foydalanuvchi odatlariga qarab biroz farq qiladi. Lekin amaliy xulosa bitta: autoplay faqat muted bilan ishonchli ishlaydi.

5.2 Fon videosi naqshi

Bosh sahifa fonida qozondan bug' ko'tarilayotgan qisqa, ovozsiz, takrorlanuvchi video. Buning standart naqshi:

<video autoplay muted loop playsinline
       width="1280" height="720"
       poster="assets/images/qozon-poster.jpg">
  <source src="assets/video/qozon-fon.webm" type="video/webm">
  <source src="assets/video/qozon-fon.mp4" type="video/mp4">
</video>

• autoplay — o'zi boshlansin.
• muted — ovozsiz. Busiz autoplay ishlamaydi.
• loop — tugagach, qaytadan boshlansin.
• playsinline — iPhone'da sahifa ichida ijro etilsin, avtomatik to'liq ekranga o'tmasin.

Bu naqsh eski GIF animatsiyalarining eng yaxshi o'rinbosari. img asoslari darsida aytgan edik: GIF juda katta. Xuddi shu animatsiya MP4 yoki WebM'da ko'pincha bir necha barobar kichik bo'ladi.

Diqqat: Harakatlanuvchi fon ba'zi odamlarda bosh aylanishi va diqqat tarqalishini keltirib chiqaradi. Uzoq davom etadigan (5 soniyadan ko'p) avtomatik video uchun foydalanuvchiga to'xtatish imkonini bering (masalan, controls bilan). Accessibility qoidalari buni talab qiladi — Accessibility nima darsida ko'ramiz.

Tekshirib ko'ring: <video autoplay src="reklama.mp4"> — sahifa ochilganda video boshlanadimi?

6. audio

audio — xuddi video ning o'zi, faqat rasmsiz:

<audio controls preload="none">
  <source src="assets/audio/choyxona-tarixi.opus"
          type="audio/ogg; codecs=opus">
  <source src="assets/audio/choyxona-tarixi.mp3" type="audio/mpeg">
  <p><a href="assets/audio/choyxona-tarixi.mp3">Audioni yuklab
  oling (MP3, 4 MB)</a></p>
</audio>

• controls — ijro paneli. Busiz audio umuman ko'rinmaydi.
• Formatlar: MP3 — hamma joyda, AAC (.m4a) — Apple qurilmalarida keng, Opus — eng samarali siqish. type da kodekni ham ko'rsatish mumkin: codecs=opus.
• loop, muted, autoplay, preload — videodagi kabi ishlaydi.

Audio uchun width, height va poster yo'q.

7. Video qayerda saqlanadi?

Kichik videolarni (bir necha megabayt) o'z saytingizda saqlash mumkin. Katta videolar esa muammo:

• Hajm va trafik. 100 MB video 1000 marta ko'rilsa — 100 GB trafik. Xosting buning uchun pul oladi yoki cheklov qo'yadi.
• Tezlik. Video telefonda sekin internetda ham uzluksiz ijro etilishi uchun uni turli sifatlarda tayyorlash kerak (360p, 720p, 1080p) va pleyer internet tezligiga qarab almashtirishi kerak. Bu adaptiv striming deyiladi va oddiy video tegi buni o'zi qila olmaydi.

Shuning uchun katta videolar ko'pincha YouTube kabi platformalarga yuklanadi va saytga iframe bilan joylanadi. Buni iframe darsida ko'ramiz. Yoki video uchun maxsus xizmatlar ishlatiladi — ularni backend qismida uchratasiz.

8. Ko'p uchraydigan xatolar

8.1 muted siz autoplay

5-bo'limda ko'rdik: video boshlanmaydi. Tuzatish: fon videosi — muted va playsinline bilan; mazmunli video — autoplay siz, controls bilan.

html-validate autoplay ni umuman xato deb belgilaydi — hatto muted bilan ham:

The autoplay attribute is not allowed on <video>

Tarjimasi: "video da autoplay atributiga ruxsat yo'q." Bu — accessibility'ga qattiq e'tibor beruvchi qoida (no-autoplay). Fon videosi uchun ongli ravishda qaror qilgan bo'lsangiz, bu qoidani loyiha sozlamasida o'chirish mumkin. Asosiysi — qarorni o'ylab qabul qilish.

8.2 controls yo'q

Video yoki audio sahifada turibdi, lekin uni boshlab bo'lmaydi. Audio esa umuman ko'rinmaydi. Tuzatish: controls.

8.3 source da srcset

<source srcset="osh.mp4" type="video/mp4">

Video source i src bilan ishlaydi — srcset bilan video yuklanmaydi. Tuzatish: src="osh.mp4".

8.4 Faqat WebM

Hamma video WebM formatida — eski iPhone'larda va ba'zi qurilmalarda ishlamasligi mumkin. Tuzatish: MP4 (H.264) zaxirasini qo'shing.

8.5 O'lchamsiz video

width va height siz video yuklanganda sahifani siljitadi — xuddi rasm kabi. Tuzatish: o'lchamlarni yozing.

9. Mashqlar

1-mashq (oson): Atributlar

1. Pleyer tugmalarini ko'rsatuvchi atribut —
2. Video tugagach qaytadan boshlanishi uchun —
3. Autoplay ishlashi uchun zarur atribut —

2-mashq (o'rta): Videoni tuzating

<video autoplay src="osh.webm"></video>
<audio src="hikoya.mp3" autoplay></audio>

Birinchisi — oshpaz haqidagi 3 daqiqalik ovozli video, ikkinchisi — audio-hikoya.

<video controls width="640" height="360" preload="metadata"
       poster="osh-poster.jpg">
  <source src="osh.webm" type="video/webm">
  <source src="osh.mp4" type="video/mp4">
  <p><a href="osh.mp4">Videoni yuklab oling</a></p>
</video>

<audio controls preload="none">
  <source src="hikoya.mp3" type="audio/mpeg">
  <p><a href="hikoya.mp3">Audioni yuklab oling</a></p>
</audio>

3-mashq (qiyin): Bosh sahifaga video

1. Telefoningizda 5–10 soniyalik qisqa video oling (masalan, choy quyilishi). Uni MP4 formatida assets/video/ ga qo'ying.
2. Bosh sahifaga uni fon videosi sifatida qo'ying: ovozsiz, takrorlanuvchi, iPhone'da sahifa ichida.
3. Videodan bitta kadrni poster sifatida saqlang va ulang.
4. "Biz haqimizda" sahifasiga esa boshqa, ovozli video uchun oddiy pleyer qo'ying: controls, preload="metadata", zaxira havola.
5. DevTools Network panelida bosh sahifa ochilganda video qancha yuklanganini tekshiring.

<video autoplay muted loop playsinline
       width="1280" height="720"
       poster="assets/images/choy-poster.jpg">
  <source src="assets/video/choy.mp4" type="video/mp4">
</video>

10. Real ishda

• Onlayn kurslar va yangilik saytlari — video pleyerlar ko'pincha video tegi asosida, ustiga JavaScript bilan o'z dizayni qo'shilgan. Ichkarida baribir shu teg.
• Landing sahifalar — ovozsiz fon videolari mashhur. Tajribali dasturchi ularni siqadi, poster qo'yadi va telefonda o'chirib, rasm ko'rsatish variantini ham o'ylaydi.
• Striming. YouTube, Netflix kabi xizmatlar videoni kichik bo'laklarga bo'lib, adaptiv tarzda beradi (HLS, DASH texnologiyalari). Bu — video tegi ustiga qurilgan murakkab tizim.
• Podkastlar — audio tegi va transkript (matnli nusxa). Transkript haqida keyingi darsda.

Xulosa

• video/audio — brauzer pleyeri; controls deyarli har doim kerak (audio'da — albatta).
• Bir nechta source (src va type bilan): WebM → MP4 zaxirasi; oxirida zaxira havola.
• poster — video muqovasi, preload — oldindan qancha yuklash, width/height — CLS'siz.
• Ovozli autoplay bloklanadi; fon videosi naqshi: autoplay muted loop playsinline.
• Uzoq avtomatik harakatni foydalanuvchi to'xtata olsin.
• Katta videolar — platformalar yoki video xizmatlari orqali, o'z xostingingizda emas.

Keyingi dars: Subtitrlar va media accessibility — track va WebVTT bilan videoni eshitmaydiganlar va ovozsiz ko'ruvchilar uchun ochish.

Manbalar

• MDN: <video>, <audio>, "Autoplay guide for media and Web Audio APIs" — developer.mozilla.org
• web.dev: "Replace animated GIFs with video" — web.dev