HTML5 Видео
Пример HTML-видео. Любезность Большой кролик бак.
Воспроизведение видео в формате HTML
Перед HTML5 видео может воспроизводиться только в браузере с подключаемым модулем (например, Flash).
Элемент HTML5 <video> указывает стандартный способ встраивания видео в веб-страницу.
Поддержка браузера
Номера в таблице указывают первую версию обозревателя, полностью поддерживающую элемент <video>.
| Element | |||||
|---|---|---|---|---|---|
| <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">
Your browser does not support the video tag.
</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">
Your browser does not support the video tag.
</video>
Атрибут автозапуска не работает в мобильных устройствах, таких как iPad и iPhone.
Поддержка HTML-видео-браузера
В HTML5 есть 3 поддерживаемых видео форматов: MP4, WebM и OGG.
Поддержка браузера для различных форматов:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | Да | Нет | Нет |
| Chrome | Да | Да | Да |
| Firefox | Да | Да | Да |
| Safari | Да | Нет | Нет |
| Opera | Да (from Opera 25) | Да | Да |
HTML Video - Типы медиа
| Формат файла | Тип медиа |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML-видео-методы, свойства и события
HTML5 определяет методы, свойства и события DOM для элемента <video>.
Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать длительность и громкость.
Есть также события DOM, которые могут уведомить вас, когда видео начинает играть, приостановлено и т.д.
Для полной справки по тегам перейдите к нашей справка аудио/видео в формате HTML5.
Теги видео HTML5
| Тег | Описание |
|---|---|
| <video> | Определяет видео или фильм |
| <source> | Определяет несколько мультимедийных ресурсов для элементов мультимедиа, таких как <Video> и <Audio> |
| <track> | Определяет текстовые дорожки в проигрывателях мультимедиа |