Тег видео: Тег | htmlbook.ru – Тег | HTML справочник

Содержание

Тег | htmlbook.ru


Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 3.0+ 10.50+ 3.1+ 3.5+ 2.0+ 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры
Браузер Internet Explorer Chrome Opera Safari Firefox
Аудио кодеки
ogg/vorbis
wav
mp3
AAC
Видео кодеки
ogg/theora
H.264
WebM

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

Синтаксис

<video>
 <source src="URL">
</video>

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
controls
Добавляет панель управления к видеоролику.
height
Задает высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.

Статьи по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Тег | 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.

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

Атрибуты

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

<!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-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/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 | WebReference

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведён в табл. 1.

Табл. 1. Кодеки и браузеры
Браузер
Аудио кодеки
ogg/vorbis17411.53.5
wav12811.543.5
mp39
12
415422
AAC9121215422
Видео кодеки
ogg/theora17411.53.5
H.2649124253.221
WebM14611.54

Firefox поддерживает AAC частично — только в контейнере MP4 и когда операционная система поддерживает этот формат.

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

Синтаксис

<video>
 <source src="<адрес>">
</video>

Закрывающий тег

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
controls
Добавляет панель управления к видеоролику.
height
Задаёт высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задаёт ширину области для воспроизведения видеоролика.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>video</title> </head> <body> <video controls=»controls» poster=»video/duel.jpg»> <source src=»video/duel.ogv» type=’video/ogg; codecs=»theora, vorbis»‘> <source src=»video/duel.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘> <source src=»video/duel.webm» type=’video/webm; codecs=»vp8, vorbis»‘> Элемент video не поддерживается вашим браузером. <a href=»video/duel.mp4″>Скачайте видео</a>. </video> </body> </html>

Результат примера в браузере показан на рис. 1.

Воспроизведение видеофайла

Рис. 1. Воспроизведение видеофайла

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 27.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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

12.0+ 9.0+ 3.5+ 4.0+ 10.5+ 4.0+

Описание

HTML тег <video> позволяет добавить на страницу видеофайл. Некоторые браузеры не поддерживают видеофайлы некоторых форматов, поэтому необходимо предоставить видеофайл в нескольких форматах одновременно, для этого используются теги <source>, которые должны располагаться внутри элемента <video>.

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

Примечание: атрибутам controls, autoplay и loop при использовании не обязательно должны быть присвоены значения, эти атрибуты являются атрибутами булева типа, то есть если атрибут указан, то данная функция считается включенной, если не указан — выключенной.

Атрибуты

autoplay:
Указывает, что воспроизведение видеофайла должно начинаться автоматически, как только файл будет полностью загружен. Значения для логического атрибута autoplay можно задавать следующими способами:

<video autoplay>
<video autoplay="autoplay">
<video autoplay="">
Пример »
controls:
Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии). Значения для логического атрибута controls можно задавать следующими способами:

<video controls>
<video controls="controls">
<video controls="">
Пример »
height:
Устанавливает высоту видеоплеера в пикселях (пример:). Пример »
loop:
Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения). Значения для логического атрибута loop можно задавать следующими способами:

<video loop>
<video loop="loop">
<video loop="">
Пример »
muted:
Позволяет отключить звук, чтобы по умолчанию видео воспроизводилось беззвучно, при желании пользователь сможет включить звук самостоятельно. Возможные значения логического атрибута muted:

<video muted>
<video muted="muted">
<video muted="">
Пример »

Примечание: атрибут muted не поддерживается в IE9 и более ранних версиях.

poster:
Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика. Пример »
preload:
Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:
  • auto — загрузка видеофайла начнется после загрузки страницы
  • metadata — сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
  • none — загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение
Пример »

Примечание: атрибут preload не поддерживается браузером Internet Explorer.

src:
Определяет путь к нужному видеофайлу (путь может быть либо абсолютным либо относительным). Пример »
width:
Устанавливает ширину видеоплеера в пикселях (пример:). Пример »

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

Стиль по умолчанию

Нет.

Пример


<video controls="controls" poster="video/duel.jpg">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег video.
</video>

Результат данного примера в окне браузера:

Пример использования тега <video>

Тег HTML видео на сайт

Тег <video> HTML используется для вставки на сайт воспроизводимого видео. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника видео-файла.

Для указания субтитров, глав и другой текстовой информации используется тег <track>.

Этот тег был введен в HTML5.

Синтаксис

<video>вложенные теги / альтернативный текст</video>

Альтернативный текст. Вы можете указать внутри тега <video> альтернативный текст. Он будет выведен, если ваш браузер не поддерживает тег.

Примеры использования <video> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка видео на сайт</title>
</head>
<body>
<video autoplay controls loop>
<source src="/video/my_video.mp4" type="video/mp4">
<source src="/video/my_video.ogg" type="video/ogg">
Воспроизведение видео-файла не поддерживается браузером
</video>
</body>
</html>

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

Атрибуты

Атрибут Значения Описание
autoplay не указывается / autoplay

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

controls не указывается / controls

Если указан, будут выведены кнопки управления плеером (play, pause и т.д.).

height число

Устанавливает высоту видео.

loop не указывается / loop

Если указан, видео будет циклически воспроизводиться до закрытия страницы (после завершения, воспроизведение начнется сначала).

muted не указывается / muted

Если указан, видео будет воспроизведено без звука.

poster URL

Адрес картинки — превью. Превью выводится на месте видеоплеера пока воспроизведение видео не началось.

preload

auto
metadata
none

Определяет особенности загрузки видео элемента.
auto — загружать видео полностью при загрузке страницы.
metadata — при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность видео).
none — не загружать видео при загрузке страницы.

Если указан атрибут autoplay, атрибут preload будет проигнорирован.

src URL

Адрес видео-файла.

width число

Устанавливает ширину видео.

Тег video HTML5 » Энциклопедия HTML5

Элемент <video> </video>

В HTML5 добавили новый тег video, он отвечает за воспроизведение видеофайлов на веб-странице, причем для воспроизведения видеофайлов не нужны дополнительные плагины или кодеки сторонних производителей, поддержка видеофайлов уже включена в спецификацию HTML5.

Пример кода тега <video>

Пример добавления видеофайла при помощи тега <video>:


<video controls="controls" poster="teg-video.jpg">
    <source src="norwegian-army-harlem-shake.ogv" />
    <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

Странно, Safari почему то не видит тега видео.

Автор ролика: Норвежская армия,
Название: Garlem Shake.
Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP4,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb

Тег <source /> содержит в себе атрибут src=" ", чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег <source /> указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение. Если ваш браузер не поддерживает файлы с расширением .ogv, то он будет проигрывать файлы с расширением .mp4

Таблица поддержки браузерами видео кодеков и форматов

Каждый браузер поддерживает только определённые видео форматы, поэтому если вы хотите чтобы ваши ролики можно было просмотреть на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp4, а другой с расширенеим .ogv

БРАУЗЕР/КОДЕК h.264 ogg/vorbis webm
Chrome 6+ да да да
FireFox 3.6+ нет да да
IE 9+ да нет нет
Opera 10.60+ нет да да
Safari 4+ да нет нет

У видео формата OGG/VORBIS, расширение файлов будет .ogv
У видео формата h.264, расширение файлов будет .mp4

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

Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…

Атрибуты тега <video>

autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :)).

controls="controls" — создает панель управления видеофайлом, по умолчанию атрибут отключён.

height=" " — задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=» «.

width=" " — задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=» «.

loop="loop" — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

poster="адрес" — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.

preload="auto/metadata/none" — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto — загружает видеофайл,
metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,
none — не загружает видеофайл.
Атрибут preload=» » не работает, если включен атрибут autoplay=» «

src="адрес" — указывает путь к видеофайлу.

В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.

Тегом video можно управлять через CSS.

Читать далее: тег source

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



Элемент <video> (от англ. «video» ‒ «видео») вставляет видео файл в HTML-документ. С его помощью можно воспроизводить видео файлы, а так же устанавливать различные настройки воспроизведения этих файлов (повтор, автовоспроизведение, картинка по умолчанию).

Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Элемент <video> может содержать в себе сразу несколько элементов в каждом из которых (при помощи атрибута src) указывается вариация одного и того же видео с различными версиями кодеков.
Внутри контейнера <video> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.

Видео кодеки

Видеокодек — это программа/алгоритм сжатия (т.е. уменьшения размера) видеоданных (видеофайла, видеопотока) и восстановления сжатых данных. Кодек — это файл-формула, которая определяет, каким образом можно «упаковать» видеоконтент и, соответственно, воспроизвести видео.

В настоящее время поддерживается три видео формата — MP4, WEBM, OGG:

MP4/MPEG-4 — самый популярный видео формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Расширение файла MP4 используется в основном для мультимедийного формата файла MPEG-4. Формат MPEG-4 – это стандарт, разработанный группой экспертов Moving Picture Experts Group (MPEG), как определено в MPEG-4, содержит MPEG-4 закодированный видео и аудио контент в кодировке Advanced Audio Coding (AAC). Обычно используется расширение файла MP4.

WebM — открытый формат мультимедиа, представленный компанией Google. Хранит видео, сжатое при помощи технологии VP8 и аудио, сжатое с помощью компрессии Ogg Vorbis. Часто всего применяется для онлайн-отправки видео с помощью HTML5.

OGG — открытый стандарт формата мультимедиаконтейнера, являющийся основным файловым и потоковым форматом для мультимедиакодеков фонда Xiph.Org, а также название проекта, занимающегося разработкой этого формата и кодеков для него. Как и все технологии, разрабатываемые под эгидой Xiph.Org, формат Ogg является открытым и свободным стандартом, не имеющим патентных или лицензионных ограничений.

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


Формат
MP4 Да Да Да Да Да Да
WebM Да Да Да Да
Ogg Да Да Да Да

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

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

Синтаксис

<video src="URL">...</video>
<video>
  <source src="URL">
</video>

Закрывающий тег

Обязателен.

Атрибуты

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

controlsHTML5
Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии).

heightHTML5
Задаёт высоту области для воспроизведения видеоролика.

loopHTML5
Повторяет воспроизведение видео с начала после его завершения.

posterHTML5
Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.

preloadHTML5
Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:
auto — загрузка видеофайла начнется после загрузки страницы
metadata — сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
none — загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение

srcHTML5
Указывает URL адрес видео файла.

widthHTML5
Задаёт ширину области для воспроизведения видеоролика.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

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

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

Пример HTML:

Попробуй сам
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает элемент video.
</video>

Спецификации

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

Элемент
<video> 9+ 4+ 11.5+ Да 4+ 3.5+
Элемент
<video> 2.1+ 3.5+ 12+ 3.2+


Author: admin

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *