САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Видео



Пример video HTML. Бесплатный Big Buck Bunny.

Редактор кода »

Воспроизведение видео в формате HTML

До HTML5 видео можно было воспроизводить только в браузере с подключаемым модулем (например: flash).

Элемент <video> HTML5 определяет стандартный способ вставки видео на веб странице.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент <video>.

Элемент
<video> 4.0 9.0 3.5 4.0 10.5

Элемент <video> HTML

Чтобы показать видео в 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>.


Автозапуск <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>
Редактор кода »

Атрибут autoplay не работает в мобильных устройствах, как iPad и iPhone.


Видео HTML - Поддержка браузеров

В HTML5 поддерживаются 3 видеоформата: MP4, WebM и Ogg.

Поддержка браузером различных форматов:

Браузер MP4 WebM Ogg
Internet Explorer Да Нет Нет
Chrome Да Да Да
Firefox Да Да Да
Safari Да Нет Нет
Opera Да (из Opera 25) Да Да

Видео HTML - Тип носителя

Формат файла Тип носителя
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Видео HTML - Методы, свойства и события

HTML5 определяет методы, свойства и события DOM для элемента <video>.

Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость.

Есть также события DOM, который может уведомить вас, когда видео начинает проигрывать, паузы и т. д.

Пример: Использование JavaScript




Видео любезно предоставлено Big Buck Bunny.

Редактор кода »

Для полной справки DOM, перейдите на наш Справочник Audio/Video DOM HTML5.


Тег video HTML5

Тег Описание
<video> Определяет video или movie
<source> Определяет несколько ресурсов мультимедиа для элементов мультимедиа, таких как <video> и <audio>
<track> Определяет текст песни в медиаплееры