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

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 в XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание 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 элемент <video> используется для отображения видео на веб странице.

Пример

Предоставлено Big Buck Bunny:

Попробуйте сами »

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, которые могут уведомлять вас, когда видео начинает воспроизводиться, приостанавливается и т.д.

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




Видео предоставлено компанией Big Buck Bunny.

Попробуйте сами »

Полный справочник DOM, зайдите HTML Audio/Video DOM Справочник.


HTML Video теги

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