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">
Ваш браузер не поддерживает тег video.
</video>Как это работает
Атрибут controls добавляет элементы управления видео — такие как воспроизведение, пауза и регулировка громкости.
Рекомендуется всегда указывать атрибуты width и height. Если высота и ширина не заданы, страница может мерцать во время загрузки видео.
Элемент <source> позволяет указать альтернативные видеофайлы, из которых браузер может выбрать подходящий. Браузер будет использовать первый распознанный формат.
Текст между тегами <video> и </video> будет отображаться только в браузерах, которые не поддерживают элемент <video>.
Автовоспроизведение видео в HTML
Чтобы видео запускалось автоматически, используйте атрибут autoplay:
Пример
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video>Примечание: Браузеры на базе Chromium в большинстве случаев не разрешают автовоспроизведение. Однако автовоспроизведение без звука всегда разрешено.
Добавьте атрибут muted после autoplay, чтобы видео начинало воспроизводиться автоматически (но без звука):
Пример
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video>Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент <video>:
| Элемент |  |  |  |  |  |
|---|---|---|---|---|---|
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Форматы видео в HTML
Поддерживаются три формата видео: MP4, WebM и Ogg. Поддержка разных форматов браузерами:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | ДА | ДА | ДА |
| Chrome | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Safari | ДА | ДА | НЕТ |
| Opera | ДА | ДА | ДА |
Видео в HTML: типы мультимедиа
| Формат файла | Тип мультимедиа |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Видео в HTML: методы, свойства и события
DOM HTML определяет методы, свойства и события для элемента <video>.
Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость.
Также существуют DOM‑события, которые могут уведомлять вас о том, что видео начало воспроизводиться, приостановлено и т. д.
Пример: использование JavaScript