HTML тег <video>html5

HTML теги

Значение и применение

Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML 5 были введены новые элементы <video>html5 и <audio>html5. Тег <video>html5 добавляет видео контент на страницу. Элементы поддерживаются во всех современных браузерах.

Формат видеофайла – это определённая структура, в которой видеозапись хранится на носителе (запоминающее устройство) и определяется двумя состовляющими: файлом-контейнером, в котором хранится сама видеозапись, и кодеками, которые используются для обработки звука и изображения. В настоящее время существует 3 поддерживаемых формата видео для элемента <video>html5:

Браузер MP4 WebM Ogg
ChromeДАДАДА
Firefox ДАДАДА
Opera ДАДАДА
Safari ДАНЕТНЕТ
IEДАНЕТНЕТ
EdgeДАНЕТНЕТ

Поддержка браузерами

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<video>html54.03.510.54.09.012.0

Атрибуты

АтрибутЗначениеОписание
autoplayhtml5autoplayУказывает, что видео запустится автоматически, как только оно будет готово.
controlshtml5controlsОтображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
heighthtml5pixelsУстанавливает высоту видео проигрывателя.
loophtml5loopЗацикливает воспроизведение файла (наша песня хороша – начинай сначала).
mutedhtml5mutedУказывает, что видео будет заглушено (без звука).
posterhtml5URLЗадает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения.
preloadhtml5auto
metadata
none
Указывает как видео должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay.
srchtml5URLУказывает URL адрес видео файла.
widthhtml5pixelsУстанавливает ширину видео проигрывателя.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <video></title>
	</head>
	<body>
		<h1>Видео в HTML5</h1>
		<video width = "320" height = "240" poster = "10.jpg" controls>
			<source src = "123.mp4" type = "video/mp4">
			<source src = "123.ogg" type = "video/ogg">
			<track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English">
			<track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default>
			Ваш браузер не поддерживает видео тег.
		</video>
	</body>
</html>

В этом примере мы:

Добавили на страницу видео (тег <video>html5) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>html5, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source>html5 атрибут type (MIME-типы для видео):

Формат MIME-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/webm

Благодаря тегу <track>html5 добавили субтитры к видео:

Результат нашего примера:

Добавление видео с субтитрами на страницу (HTML тег <video>).
Добавление видео с субтитрами на страницу (HTML тег <video>).

Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>html5), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:

<video src = "123.mp4" width = "320" height = "240" poster = "10.jpg" controls>
	Ваш браузер не поддерживает этот видео формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот видео формат-->
	Вы можете скачать этот файл по ссылке.
</video>

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги