Video html5 tag: HTML5 Video — от А до Я / Хабр — Вебджем.рф | Создание и продвижение сайтов

Содержание

Тег video

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯

Пример

Воспроизведение видео:

<video controls>
<source src=»movie.mp4″ type=»video/mp4″>
<source src=»movie.ogg» type=»video/ogg»>
Your browser does not support the video tag.
</video>

Определение и использование

Тег <video> определяет видео, например фрагмент ролика или другие видеопотоки.

В настоящее время имеется 3 поддерживаемых видео форматов для элемента <video>: MP4, WebM, и Ogg:

Browser	MP4	WebM	Ogg
Internet Explorer	Да	Нет	Нет
Chrome	Да	Да	Да
Firefox	Да От Firefox 21 От Firefox 30 Для Linux	Да	Да
Safari	Да	Нет	Нет
Opera	Да От Opera 25	Да	Да

MP4 = MPEG 4 файлы с h364 видео кодек и AAC аудио кодек
WebM = WebM файлы с VP8 видео кодек и Vorbis аудио кодек
Ogg = Ogg файлы с Theora видео кодек и Vorbis аудио кодек

Типы MIME для форматов видео

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

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

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

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

Различия между HTML 4,01 и HTML5

Тег <video> является новым в HTML5.

Советы и примечания

Совет: Любой текст между тегами <video> и </video> будет отображаться в обозревателях, не поддерживающих элемент <video>.

Дополнительные атрибуты

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что воспроизведение видео начнется сразу после его готовности
controls	controls	Указывает, что элементы управления видео должны отображаться (например, кнопка воспроизведения/паузы и т.д.).
height	pixels	Устанавливает высоту видео проигрывателя
loop	loop	Указывает, что видео будет начинаться снова, каждый раз, когда он закончится
muted	muted	Указывает, что аудиовыход видео должен быть отключен
poster	URL	Указывает изображение, которое будет отображаться во время загрузки видео, или до тех пор, пока пользователь не достигнет кнопки воспроизведения
preload	auto metadata none	Указывает, если и как автор считает, что видео должно быть загружено при загрузке страницы
src	URL	Указывает URL-адрес видео-файла
width	pixels	Устанавливает ширину видео проигрывателя

Глобальные атрибуты

Тег <video> также поддерживает Глобальные атрибуты в HTML.

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

Тег <video> также поддерживает Атрибуты событий в HTML.

Параметры CSS по умолчанию

Нет.

❮Назад Полный HTML Ссылки Дальше ❯

Тег | HTML справочник

HTML теги

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

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

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

3 поддерживаемых формата видео для элемента <video>:

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

Контейнер MPEG-4 + видео кодек Н.264 + аудио кодек ААС. Это сочетание обычно называют «MPEG-4». Н.264 — высококачественный и гибкий видео кодек, но он запатентован и на его использование необходимо получить платную лицензию. Лицензионные требования стали основной причиной, почему браузеры отказываются его поддерживать.

Контейнер Ogg + видео кодек Theora + аудио кодек Vorbis. Как правило, формат называется «Ogg Theora». Все кодеки и контейнер в этом варианте с открытым исходным кодом и без патентных или лицензионных ограничений.
Контейнер WebM + видео кодек VP8 + аудио кодек Vorbis. «WebM» открытый формат мультимедиа, представленный компанией на конференции Google I/O 19 мая 2010 года. Формат не требует лицензионных отчислений, основан на открытых видео кодеках VP8 и VP9, аудио кодеке Vorbis и подмножестве медиа контейнера Matroska. Новый формат вместе с VP8 призван заменить проприетарный стандарт H.264/MPEG-4.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<video>	4. 0	3.5	10.5	4.0	9.0	12.0

Атрибуты

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что видео запустится автоматически, как только оно будет готово.
controls	controls	Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
height	pixels	Устанавливает высоту видео проигрывателя.
loop	loop	Зацикливает воспроизведение файла (наша песня хороша – начинай сначала).
muted	muted	Указывает, что видео будет заглушено (без звука).
poster	URL	Задает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения.
preload	auto metadata none	Указывает как видео должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay.
src	URL	Указывает URL адрес видео файла.
width	pixels	Устанавливает ширину видео проигрывателя.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <video></title>
	</head>
	<body>
		<h2>Видео в HTML5</h2>
		<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>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = «320» height = «240»), атрибут poster — указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

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

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

Формат	MIME-типы
MP4	video/mp4
Ogg	video/ogg
WebM	video/webm

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

Добавили путь к файлу атрибутом src.
Установили тип дорожки — субтитры kind = «subtitles» (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
Установили язык дорожки srclang = «ru».
Отобразили названия двух дорожек label = «English», label = «Russian».
Выбрали дорожку по умолчанию атрибутом default.

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

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

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

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

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

Нет.

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

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

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

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

HTML теги

HTML-видео Тег

❮ Назад Полный справочник HTML Далее ❯

Пример

Воспроизведение видео:

<управление видео>

Ваш браузер не поддерживает тег видео.

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

Определение и использование

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

Тег содержит один или несколько <источник> тега с разными источниками видео. Браузер выберет первый источник поддерживает.

Текст между и теги будут отображаться только в браузерах, не поддерживающих элемент

HTML поддерживает три видеоформата: MP4, WebM и OGG.

Браузер	МП4	ВебМ	Огг
Край	ДА	ДА	ДА
Хром	ДА	ДА	ДА
Firefox	ДА	ДА	ДА
Сафари	ДА	ДА	НЕТ
Опера	ДА	ДА	ДА

Советы и примечания

Совет: Аудиофайлы смотрите на Тег <аудио> .

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

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

Элемент
<видео>	4,0	9,0	3,5	3.1	11,5

Дополнительные атрибуты

Атрибут	Значение	Описание
автовоспроизведение	автовоспроизведение	Указывает, что воспроизведение видео начнется, как только оно будет готово.
органы управления	элементы управления	Указывает, что должны отображаться элементы управления видео (например, кнопка воспроизведения/паузы и т. д.).
высота	пикселей	Устанавливает высоту видеоплеера
петля	петля	Указывает, что видео будет начинаться заново каждый раз, когда оно заканчивается.
приглушенный	приглушенный	Указывает, что аудиовыход видео должен быть отключен.
плакат	URL-адрес	Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения
предварительная нагрузка	авто метаданные нет	Указывает, как автор считает, что видео должно быть загружено при загрузке страницы
источник	URL-адрес	Указывает URL-адрес видеофайла
ширина	пикселей	Устанавливает ширину видеоплеера

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

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

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Ссылка HTML DOM: Ссылка HTML Audio/Video DOM

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

9003 902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Тег HTML 5

Тег HTML 5 используется для указания видео в документе HTML. Например, вы можете встроить музыкальное видео на свою веб-страницу, чтобы посетители могли его слушать и смотреть.

Тег HTML 5 принимает атрибуты, определяющие способ воспроизведения видео. Атрибуты включают preload , автовоспроизведение , цикл и многое другое. См. ниже полный список поддерживаемых атрибутов.

Любой контент между открывающим и закрывающим тегами является запасным контентом . Этот контент отображается только в браузерах, которые не поддерживают тег .

Тег был введен в HTML 5 (официально именуемый HTML5 — без пробела). Видео HTML5 в настоящее время широко реализовано в основных браузерах и поддерживается крупными веб-сайтами, такими как YouTube.

Пример

В этом примере показано использование тега .

Если вы видите элементы управления видео, но видео не воспроизводится, когда вы нажимаете кнопку «Воспроизвести», возможно, ваш браузер не поддерживает этот тип файла (например, Ogg ). В этом случае попробуйте тот же код, но с другим форматом файла.

Атрибуты

Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

Ниже перечислены атрибуты, которые можно добавить к этому тегу.

Специфичные для элемента атрибуты

В следующей таблице показаны атрибуты, характерные для этого тега/элемента.

Атрибут Описание

src Указывает расположение видеофайла. Его значение должно быть URI видеофайла.

crossorigin

Этот атрибут является атрибутом настроек CORS. CORS расшифровывается как Cross-Origin Resource Sharing .

Назначение атрибута crossorigin — позволить вам настроить запросы CORS для извлеченных данных элемента. Перечислены значения атрибута crossorigin .

Возможные значения:

Значение

Описание

анонимный

В запросах CORS из разных источников для элемента не будет установлен флаг учетных данных. Другими словами, не будет обмена учетными данными пользователя через файлы cookie, SSL-сертификаты на стороне клиента или HTTP-аутентификацию.

use-credentials

Запросы CORS между источниками для элемента будут иметь установленный флаг учетных данных.

Если этот атрибут не указан, CORS вообще не используется.

Недопустимое ключевое слово и пустая строка будут обрабатываться как анонимное значение .

постер Указывает изображение, которое будет использоваться, пока видео недоступно (т. е. оно еще не загружено). Обычно это изображение одного из первых кадров видео. Если указано, значение должно быть допустимым URL-адресом изображения.

preload

Указывает, следует ли предварительно загружать видео, и если да, то каким образом. Этот атрибут позволяет автору дать браузеру/агенту пользователя подсказку о том, что, по мнению автора, приведет к наилучшему взаимодействию с пользователем. В некоторых случаях этот атрибут может быть проигнорирован. Например, если пользователь отключил предварительную загрузку или возникли проблемы с сетевым подключением.

Возможные значения:

нет
метаданных
авто

Обратите внимание, что атрибут autoplay может переопределить атрибут preload (поскольку, если медиафайл воспроизводится, он, естественно, должен сначала буферизоваться, независимо от подсказки, заданной атрибутом preload). Несмотря на это, вы по-прежнему можете указать оба атрибута.

autoplay

Указывает, следует ли начинать воспроизведение видео, как только оно может воспроизводиться без остановки.

Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, которое соответствует каноническому имени атрибута без учета регистра, без начального или конечного пробела (т. е. либо autoplay или autoplay="autoplay" ).

Возможные значения:

[Пустая строка]
автовоспроизведение

медиагруппа

Для синхронизации воспроизведения видео (или медиа-элементов). Позволяет указать медиа-элементы для связи друг с другом. Значение представляет собой текстовую строку, например: mediagroup=movie . Видео/медиа элементы с одинаковым значением автоматически связываются пользовательским агентом/браузером.

Примером использования атрибута медиагруппы является наложение дорожки сурдопереводчика из одного файла фильма поверх другого.

цикл

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

Возможные значения:

[Пустая строка]
петля

без звука

Управляет состоянием аудиовыхода видео по умолчанию. При наличии этого атрибута звук при загрузке отключается (т. е. звук отсутствует). Этот атрибут переопределит предпочтения пользователей. Затем пользователь может включить звук, если он / она того пожелает. Это помогает пользователям не раздражаться громкими звуками, исходящими от видео, как только страница/видео начинает загружаться.

Пользователи часто закрывают браузер, когда это происходит. Атрибут «без звука» призван решить эту проблему, заставляя видео начинаться тихо, а не громко.

Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение без учета регистра для канонического имени атрибута без начального или конечного пробела (например, muted или muted="muted" ).

Возможные значения:

[Пустая строка]
приглушенный

элементы управления

Указывает, отображать ли элементы управления видео (например, кнопку воспроизведения/паузы и т. д.).

Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, не зависящее от регистра, для канонического имени атрибута, без начального или конечного пробела (т. е. либо , либо , либо , control="controls" ).

Возможные значения:

[Пустая строка]
элементы управления

ширина

Указывает ширину в пикселях для отображения видео.

Возможные значения:

[Неотрицательное целое число] (например, 300)

height

Указывает высоту в пикселях для отображения видео.

Возможные значения:

[Неотрицательное целое число] (например, 150)

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к диалоговому элемента).

ключ доступа
автокапитализация
класс
редактируемый контент
данные-*
директор
перетаскиваемый
скрытый
идентификатор
режим ввода
это
ИД товара
элементпроп
Артикул
предметная область
тип изделия
язык
часть
слот
проверка правописания
стиль
tabindex
Название
перевод

Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.

прерывание
onauxclick
размытие
при отмене
онканплей
oncanplaythrough
на смену
по клику
при закрытии
в контекстном меню
онкопия
при обмене
нарезной
ondblclick
ондраг
ондрагенд
Драгентер
ондрагзит
на накладке
ондраговер
ондрагстарт
впускной
изменение продолжительности
пустой
односторонний
при ошибке
онфокус
onformdata
на входе
недействительный
нажатие клавиши
нажатие клавиши
onkeyup
onlanguagechange
под нагрузкой
загруженные данные
загруженные метаданные
запуск при загрузке
при нажатии мыши
ввод с помощью мыши
на коврике для мыши
onmousemove
onmouseout
при наведении мыши
для мыши вверх
паста
пауза
в игре
в игре
в процессе
при изменении скорости
при сбросе
при изменении размера
при прокрутке
нарушение политики безопасности
onseeked
поиск
по выбору
при смене слота
установлен
при отправке
при подвешивании
своевременное обновление
нагрудник
при изменении объема
в ожидании
на колесе

Полный список обработчиков событий см.

Video html5 tag: HTML5 Video — от А до Я / Хабр

Тег video

Пример

Определение и использование

Типы MIME для форматов видео

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

Различия между HTML 4,01 и HTML5

Советы и примечания

Дополнительные атрибуты

Глобальные атрибуты

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

Похожие страницы

Параметры CSS по умолчанию

Популярное

Тег | HTML справочник

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

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

Атрибуты

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

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

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

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

HTML-видео Тег

Пример

Определение и использование

Советы и примечания

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

Дополнительные атрибуты

Глобальные атрибуты

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

Связанные страницы

Настройки CSS по умолчанию

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Тег HTML 5

Пример

Атрибуты

Специфичные для элемента атрибуты

Глобальные атрибуты

Атрибуты содержимого обработчика событий

Добавить комментарий Отменить ответ

Рубрики