HTML Video

TIP

HTML <video> elementi yordamida veb sahifada video ko'rsatish mumkin.

Video Misoli

Big Buck Bunny tomonidan taqdim etilgan:

---

HTML <video> Elementi

HTMLda video ko'rsatish uchun <video> elementidan foydalaniladi:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Brauzeringiz video tegini qo'llab-quvvatlamaydi.
</video>

---

Qanday Ishlaydi

• controls atributi video boshqaruvlarini (play, pauza, ovoz) qo'shadi.
• Har doim width va height atributlarini kiritish tavsiya etiladi. Agar balandlik va kenglik ko'rsatilmasa, video yuklanayotganda sahifa titrab ketishi mumkin.
• <source> elementi turli formatdagi videolarni ko'rsatish imkonini beradi. Brauzer birinchi tanilgan formatni ishlatadi.
• <video> va </video> orasidagi matn faqat <video> elementini qo'llab-quvvatlamaydigan brauzerlarda ko'rsatiladi.

---

HTML <video> Avtomatik Oynatish

Videoni avtomatik boshlash uchun autoplay atributidan foydalaning:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  Brauzeringiz video tegini qo'llab-quvvatlamaydi.
</video>

WARNING

Eslatma: Chromium brauzerlari ko'p hollarda avtomatik oynatishni cheklaydi. Biroq, ovozi o'chirilgan (muted) avtomatik oynatish har doim ruxsat etiladi.

Videoni avtomatik va ovozi o'chirilgan holda boshlash uchun muted atributini ham qo'shing:

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  Brauzeringiz video tegini qo'llab-quvvatlamaydi.
</video>

---

Brauzer Qo'llab-quvvatlashi

Element	Chrome	Edge/IE	Firefox	Safari	Opera
<video>	4.0	9.0	3.5	4.0	10.5

---

HTML Video Formatlari

Uchta asosiy video formati mavjud: MP4, WebM va Ogg. Brauzerlar formatlarni quyidagicha qo'llab-quvvatlaydi:

Brauzer	MP4	WebM	Ogg
Edge	HA	HA	HA
Chrome	HA	HA	HA
Firefox	HA	HA	HA
Safari	HA	HA	YO'Q
Opera	HA	HA	HA

---

HTML Video - Media Turlari

Fayl Formati	Media Turi
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

---

HTML Video - Metodlar, Xossalar va Hodisalar

HTML DOM <video> elementi uchun metodlar, xossalar va hodisalarni belgilaydi.
Bu yordamida videoni yuklash, ijro etish, pauza qilish, davomiylik va ovoz balandligini o'rnatish mumkin.
Shuningdek, video boshlanganda, pauza qilinganda va boshqa holatlarda DOM hodisalari orqali xabar olish mumkin.

Misol: JavaScriptdan foydalanish

<button onclick="ijroPauza()">Ijro/Pauza</button>
<button onclick="kattaQil()">Katta</button>
<button onclick="kichikQil()">Kichik</button>
<button onclick="normalQil()">Normal</button>
<br/><br/>
<video id="video2" style="max-width:100%" width="480">
  <source src="/mov_bbb.mp4" type="video/mp4" />
  Brauzeringiz HTML5 videoni qo'llab-quvvatlamaydi.
</video>
<script>
var videoObyekt = document.getElementById("video2");
function ijroPauza() {
  if (videoObyekt.paused)
    videoObyekt.play();
  else
    videoObyekt.pause();
}
function kattaQil() {
  videoObyekt.width = 600;
}
function kichikQil() {
  videoObyekt.width = 320;
}
function normalQil() {
  videoObyekt.width = 480;
}
</script>

Video Big Buck Bunny tomonidan taqdim etilgan.

To'liq DOM ma'lumotlari uchun HTML Audio/Video DOM Reference sahifasiga qarang.

---

HTML Video Teglari

Teg	Tavsifi
<video>	Video yoki filmni belgilaydi
<source>	<video> va <audio> elementlari uchun bir nechta media manbalarni belgilaydi
<track>	Media pleerlarda matnli treklarni belgilaydi

---