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

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML с CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML с JavaScript HTML Путь к Файлу HTML Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство по стилю HTML Сущности HTML Символы HTML Смайлики HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка 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> Определяет текст песни в медиаплееры