HTML5 Видео
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>
Попробуйте сами »
HTML 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>
Попробуйте сами »
Атрибут автозапуска не работает на мобильных устройствах, таких как iPad и iPhone.
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает элемент <video>.
| Элемент | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Формат video
Существует три поддерживаемых видеоформата: MP4, WebM, и Ogg. Поддержка браузером различных форматов является:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | ДА | НЕТ | НЕТ |
| Chrome | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Safari | ДА | НЕТ | НЕТ |
| Opera | ДА (для Opera 25) | ДА | ДА |
HTML Video - тип носителя
| Формат файла | Тип носителя |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video - Методы, свойства и события
HTML определяет методы, свойства и события DOM для элемента <video>.
Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость.
Существуют также события DOM, которые могут уведомлять вас, когда видео начинает воспроизводиться, приостанавливается и т.д.
Полный справочник DOM, зайдите HTML Audio/Video DOM Справочник.
HTML Video теги
| Тег | Описание |
|---|---|
| <video> | Определяет видео или фильм |
| <source> | Определяет несколько медиаресурсов для медиаэлементов, таких как <video> и <audio> |
| <track> | Определяет текстовые дорожки в медиаплеерах |