HTML Видео
Воспроизведение видео в HTML
До появления спецификации HTML5 видео можно было воспроизводить в браузере только с помощью плагинов (например, Flash).
HTML5‑элемент <video> задаёт стандартный способ встраивания видео на веб‑страницу.
Поддержка браузерами
Цифры в таблице показывают первую версию браузера, которая полностью поддерживает элемент <video>.
| Элемент | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
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 <video> Автовоспроизведение
Чтобы видео начинало воспроизводиться автоматически, используйте атрибут autoplay:
Пример
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video>
Попробуйте сами »
Атрибут autoplay не работает на мобильных устройствах, таких как iPad и iPhone.
HTML Видео — Поддержка браузерами
В HTML5 поддерживаются три видеоформата: MP4, WebM и Ogg.
Поддержка различных форматов в браузерах:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (с версии Opera 25) | YES | YES |
HTML Видео — Типы медиа
| Формат файла | MIME‑тип |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Видео — методы, свойства и события
HTML5 определяет методы, свойства и DOM‑события для элемента <video>.
Это позволяет загружать, воспроизводить и ставить видео на паузу, а также управлять длительностью и громкостью.
DOM‑события позволяют отслеживать начало воспроизведения, остановку и другие состояния.
Полную DOM‑справку смотрите в разделе HTML5 Аудио/Видео DOM Справочник на нашем сайте W3Schools на русском.
HTML5 Видео‑теги
| Тег | Описание |
|---|---|
| <video> | Определяет видео или фильм |
| <source> | Определяет несколько мультимедийных ресурсов для элементов <video> и <audio> |
| <track> | Определяет текстовые дорожки в медиаплеерах |
