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>позволяет указать альтернативные видеофайлы, из которых может выбирать браузер. Браузер будет использовать первый распознанный формат.
Текст между тегами <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">
Your browser does not support the video tag.
</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">
Your browser does not support the video tag.
</video>
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую
<video>элемент.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Форматы HTML-видео
Поддерживаются три видеоформата: MP4, WebM и Ogg. Браузер поддерживает различные форматы:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML-видео — типы мультимедиа
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML-видео — методы, свойства и события
HTML DOM определяет методы, свойства и события для <video>элемента.
Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость.
Существуют также события DOM, которые могут уведомлять вас, когда видео начинает воспроизводиться, приостанавливается и т. д.
Полную справку по DOM см. в нашем справочнике по HTML Audio/Video DOM .
HTML-теги для видео
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |