---
title: HTML Видео
description: "> HTML ``элементийг вэб хуудсан дээр видеог үзүүлэхэд ашигладаг. ## HTML элемент HTML дээр видео харуулахын тулд `` элементийг ашиглдаг: ### Жишээ ` Your browser does not support the video tag. ` ## Хэрхэн ажилладаг `controls` шинж чанар нь тоглуулах,…"
url: "https://apprentice.mn/docs/html-video/"
updated: "2021-07-23"
category: HTML
---

# HTML Видео

> HTML `<video>`элементийг вэб хуудсан дээр видеог үзүүлэхэд ашигладаг.

## HTML <video> элемент

HTML дээр видео харуулахын тулд `<video>` элементийг ашиглдаг:

### Жишээ

      `<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>`

## Хэрхэн ажилладаг

`controls` шинж чанар нь тоглуулах, түр зогсоох, дууны хэмжээ гэх мэт видео удирлагыг нэмдэг.

`width` ба `height` шинж чанаруудыг үргэлж оруулах нь зүйтэй юм. Хэрэв өндөр ба өргөнийг тохируулаагүй бол видео ачаалах үед хуудас анивчиж магадгүй юм.

`<source>` элемент нь хөтчийн сонгож болох өөр видео файлуудыг зааж өгөх боломжийг танд олгоно.

The text between the `<video>` and `</video>` tags will only be displayed in browsers that do not support the `<video>` element.

 `<video>`  ба `</video>`шошгоны хоорондох текстийг зөвхөн `<video>` элементийг дэмждэггүй хөтөч дээр л харуулах болно.

---

## HTML <video> Автоматаар тоглох

Видеог автоматаар эхлүүлэхийн тулд `autoplay` шинж чанарыг ашиглана:

### Жишээ

      `<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>`

**Тэмдэглэл**: Chromium хөтчүүд ихэнх тохиолдолд автоматаар тоглуулахыг зөвшөөрдөггүй. Гэхдээ дуугүй авто тоглуулахыг үргэлж зөвшөөрдөг.

Add `muted` after `autoplay` to let your video start playing automatically (but muted):

Видеогоо автоматаар тоглуулж эхлэх боломжийг олгохын тулд `autoplay`  дараа `muted`  нэмэж автоматаар тоглуулж  болно(гэхдээ дуугүй):

     `<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>`

## Browser Support

The numbers in the table specify the first browser version that fully supports the `<video>` element.

Хүснэгтэд байгаа тоонууд нь `<video>` элементийг бүрэн дэмждэг хөтөчийн анхны хувилбарыг зааж өгдөг.

| Элемент | chrome | internet explorer | mozila firefox | safari | opera |
| --- | --- | --- | --- | --- | --- |
| <video> | 4.0 |              9.0 |       3.5 |  4.0 | 10.5 |

## HTML видео формат

MP4, WebM, Ogg гэсэн гурван дэмжигдсэн видео формат байдаг. Өөр форматтай хөтөчийн дэмжлэг нь:

| Browser | MP4 | WebM | Ogg |
| --- | --- | --- | --- |
| Edge | Дэмжинэ | Дэмжинэ | Дэмжинэ |
| Chrome | Дэмжинэ | Дэмжинэ | Дэмжинэ |
| Firefox | Дэмжинэ | Дэмжинэ | Дэмжинэ |
| Safari | Дэмжинэ | Дэмжинэ | Дэмжинэ |
| Opera | Дэмжинэ | Дэмжинэ | Дэмжинэ |

---

## HTML видео – медиа төрөл

| File Format | Media Type |
| --- | --- |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |

 

## HTML видео – арга, шинж чанар, үйл явдал

HTML DOM нь `<video>` элементийн арга, шинж чанар, үйл явдлыг тодорхойлдог.

Энэ нь видеог ачаалах, тоглуулах, түр зогсоох, үргэлжлэх хугацаа, дууны түвшинг тохируулах боломжийг олгодог.

Видео тоглож эхлэх, түр зогсоох гэх мэт тохиолдолд танд мэдэгдэх DOM арга хэмжээнүүд бас байдаг.

## HTML Video Tags [#](https://apprentice.mn/docs/html-video/#11-toc-title)

| Tag | Description |
| --- | --- |
| <video> | Видео эсвэл киног тодорхойлдог |
| <source> | <video>, <audio> гэх мэт олон медиа элементүүдийн нөөцийг тодорхойлдог |
| <track> | Медиа тоглуулагч дахь текстийн замыг тодорхойлно |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-video%2F&linkname=HTML%20%D0%92%D0%B8%D0%B4%D0%B5%D0%BE](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-video%2F&linkname=HTML%20%D0%92%D0%B8%D0%B4%D0%B5%D0%BE)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-video%2F&linkname=HTML%20%D0%92%D0%B8%D0%B4%D0%B5%D0%BE](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-video%2F&linkname=HTML%20%D0%92%D0%B8%D0%B4%D0%B5%D0%BE)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-video%2F&linkname=HTML%20%D0%92%D0%B8%D0%B4%D0%B5%D0%BE](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-video%2F&linkname=HTML%20%D0%92%D0%B8%D0%B4%D0%B5%D0%BE)[https://www.addtoany.com/share](https://www.addtoany.com/share)