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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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> Определяет текст песни в медиаплееры