Тег для видео: Атрибут loop | htmlbook.ru

Содержание

Тег video



Пример

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

<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.


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

HTML DOM Ссылки: HTML Audio/Video DOM Reference


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

Нет.


Тег | 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/vorbis 17 4 11.5 3.5
wav 12 8 11.5 4 3.5
mp3 9 12 4 15 4 22
AAC 9 12 12 15 4 22
Видео кодеки
ogg/theora 17 4 11.5 3.5
H.264 9 12 4 25 3.2 21
WebM 14 6 11.5 4

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

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

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

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

Тег 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 число

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

HTML тег video

Тег <video> позволяет в браузере проигрывать видео файлы.

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

БраузерMP4WEBMOGG
Internet ExplorerДаНетНет
ChromeДаДаДа
FirefoxДаДаДа
SafariДаНетНет
OperaДаДаДа

  • MP4 = h356 видео кодек + AAC аудио кодек
  • WEBM = VP8 видео кодек + Vorbis аудио кодек
  • OGG = Theora видео кодек + Vorbis аудио кодек

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

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

ФорматMIME-тип
MP4video/mp4
WEBMvideo/webm
OGGvideo/ogg

Разница между HTML 4.01 и HTML5

Тег <video> был добавлен в HTML5.

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

АтрибутОписание
autoplayАвтоматически запускает медиа-файл на воспроизведение
controlsВключает элементы управления воспроизведением видеофайла
heightОпределяет высоту области отображения видео
loopВключает бесконечный цикл воспроизведения видеофайла
mutedОтключает звук у видеофайла
posterОпределяет URL изображения заставки видеофайла
preloadОпределяет, следует ли загружать видеофайл во время загрузки страницы
srcОпределяет URL видеофайла
widthОпределяет ширину видеоплеера

Общие атрибуты

Тег <video> поддерживает общие атрибуты и атрибуты-события.

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

Проигрываем видео файл:


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

HTML первые шаги — урок 7 — Тег object. Вставка видео с Youtube.

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

 

 

Получился вот такой код:

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

Как вы наверно уже заметили для вставки видео используется тег <object>. Также у тега object есть атрибут style. Атрибут style это универсальный для всех тегов атрибут в нем пишутся CSS-стили для тега. Что такое CSS мы разберем чуть позже, а пока хватит нам и этого. CSS стили в атрибуте пишутся через точку с запятой. Здесь у нас есть height и width, то есть высота и ширина. Именно эти параметры мы можем поменять. Например если мы поставим:

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

То размер проигрывателя Youtube будет в два раза меньше. Также тогда следует изменить высоту и ширину у тега embed, которые заданы атрибутами width и height.

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

Также в теге object включены теги <param>. В тегах param прописываются свойства вставленного объекта. Среди вставленных параметров:

movie — обозначает, что это видео-ролик, а далее в атрибуте value URL этого ролика.

allowFullScreen — разрешить переход в полноэкранный режим, можно поставить value=»false», чтобы нельзя было переходить в полноэкранный режим.

allowScriptAccess — нужно для работы с API проигрывателя.

HTML-видео


Элемент HTML используется для показать видео на веб-странице.



HTML-элемент