Видео html: HTML5 Video — от А до Я / Хабр - Блог сумасшедшего сисадмина

Содержание

Тег | 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-типы
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 <video>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент <source>; браузер сам определит наиболее подходящий источник.

Для просмотра списка поддерживаемых форматов, перейдите по ссылке Поддерживаемые аудио и видео элементами форматы мультимедийных файлов.

Контекст Использования

Допустимое содержимое. Если элемент имеет атрибут src: 0 или более элементов <track>, за которым следует прозрачный контент, который не содержит элементов мультимедиа: <audio> или <video>
Иначе: 0 или более элементов <source>, за которыми следует 0 или более элементов <track>, затем прозрачным содержимым, которое не содержит элементы мультимедиа: <audio> или <video>.

Content categories	Flow content, содержание фраз, встроенный контент. Если имеет атрибут `controls`: становится интерактивным элементом с осязаемым содержанием.
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Допустимые родительские элементы	Любой элемент, который принимает встроенный контент.
DOM интерфейс	`HTMLVideoElement`

Атрибуты

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

autoplay

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

autobuffer

Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. Примечание: несмотря на то, что в ранних версиях HTML5 атрибут autobuffer присутствовал, в последующих выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут preload, вместо autobuffer с другим синтаксисом. баг 548523

buffered

Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект TimeRanges.

controls

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

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous: Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.
use-credentials: Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

height

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

loop

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

muted

Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию — «ложь», и это означает, что звук будет воспроизводиться, когда видео воспроизводится.

played

Атрибут TimeRanges, указывающий все диапазоны воспроизводимого видео.

preload

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

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

Если не задано, значение атрибута определяется бразуером по умолчанию (то есть, каждый браузер имеет по умолчанию значение данного атрибута). Спецификация рекомендует использовать metadata.

Usage notes:

The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
The specification does not force the browser to follow the value of this attribute; it is a mere hint.

poster

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

src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

width

Ширина области отображения видео в пикселях.

События

The <video> element can fire many different events.

Примеры

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image «posterimage.jpg» is displayed in its place.

The second example allows the user to choose between different subtitles.

Multiple Sources Example

<video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>

You can try the preceding example on HTML5 video demo example with live preview code editor.

Server support

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to «video/ogg» MIME type. The most common video file type extensions are «.ogm», «.ogv», or «.ogg». To do this, edit the «mime.types» file in «/etc/apache» or use the «AddType» configuration directive in httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files («.webm» is the most common one) to the MIME type «video/webm» via the «mime.types» file in «/etc/apache» or via the «AddType» configuration directive in httpd.conf.

AddType video/webm .webm

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

Интерфейс DOM

Этот элемент реализует интерфейс HTMLVideoElement.

Совместимость браузера

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`autoplay` attribute	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`buffered` attribute	?	4.0 (2.0)	?	(Да)	?
`controls` attribute	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`crossorigin` attribue	?	12.0 (12.0)	?	?	?
`loop` attribute	3.0	11.0 (11.0)	9.0	10.5	3.1
`muted` attribute	30.0	11.0 (11.0)	10.0	(Да)	5.0
`played` property	?	15.0 (15.0)	?	(Да)	?
`poster` attribute	3.0	3.6 (1.9.2)	9.0	10.5	3.1
`preload` attribute	3.0	4.0 (2.0)	9.0	(Да)	3.1
`src` attribute	3.0	3.5 (1.9.1)	9.0	10.5	3.1

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1.0)	?	?	?
`autoplay` attribute	?	1.0 (1.0)	8.1	?	(Да)^[1]
`buffered` attribute	?	4.0 (2.0)	?	?	?
`controls` attribute	?	1.0 (1.0)	?	?	?
`loop` attribute	?	11.0 (11.0)	8.0	?	6.0
`muted` attribute	?	11.0 (11.0)	8.0	?	?
`played` property	?	15.0 (15.0)	?	?	?
`poster` attribute	?	1.0 (1.0)	?	?	?
`preload` attribute	?	4.0 (2.0)	?	?	?
`src` attribute	?	1.0 (1.0)	?	?	?
`crossorigin` attribute	?	12.0 (12.0)	?	?	?

[1] This feature is only available on iOS 6.0.

Смотрите также

| 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 Видео
Воспроизведение видео в формате HTML
До HTML5 видео можно было воспроизводить только в браузере с подключаемым модулем (например: flash).
Элемент <video> HTML5 определяет стандартный способ вставки видео на веб странице.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент <video>.
Элемент
<video> 4.0 9.0 3.5 4.0 10.5
Элемент <video> HTML
Чтобы показать видео в HTML, используйте элемент <video>:
Пример
<video controls>
<source src=»movie.mp4″ type=»video/mp4″>
<source src=»movie.ogg» type=»video/ogg»>
Ваш браузер не поддерживает тег video.
</video>
Редактор кода »
Как это работает?
Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза и громкость.
Это хорошая идея, чтобы всегда подключать атрибуты width и height. Если высота и ширина не установлены, страница может мерцать во время загрузки видео.
Элемент <source> позволяет указать альтернативные видеофайлы, которые браузер может выбрать. Браузер будет использовать первый распознанный Формат.
Текст между тегами <video> и </video> будут отображаться только в браузерах, которые не поддерживают элемент <video>.
Автозапуск <video> HTML
Для автоматического запуска видео используйте атрибут autoplay:
Пример
<video autoplay>
<source src=»movie.mp4″ type=»video/mp4″>
<source src=»movie.ogg» type=»video/ogg»>
Ваш браузер не поддерживает тег video.
</video>
Редактор кода »
Атрибут autoplay не работает в мобильных устройствах, как iPad и iPhone.
Видео HTML — Поддержка браузеров
В HTML5 поддерживаются 3 видеоформата: MP4, WebM и Ogg.
Поддержка браузером различных форматов:
Браузер MP4 WebM Ogg
Internet Explorer Да Нет Нет
Chrome Да Да Да
Firefox Да Да Да
Safari Да Нет Нет
Opera Да (из Opera 25) Да Да
Видео HTML — Тип носителя
Формат файла Тип носителя
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Видео HTML — Методы, свойства и события
HTML5 определяет методы, свойства и события DOM для элемента <video>.
Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость.
Есть также события DOM, который может уведомить вас, когда видео начинает проигрывать, паузы и т. д.
Пример: Использование JavaScript

Воспр/Пауза Большой Малый Нормальный
Ваш браузер не поддерживает видео HTML5.
Видео любезно предоставлено Big Buck Bunny.
Редактор кода »
Для полной справки DOM, перейдите на наш Справочник Audio/Video DOM HTML5.
Тег video HTML5
Тег Описание
<video> Определяет video или movie
<source> Определяет несколько ресурсов мультимедиа для элементов мультимедиа, таких как <video> и <audio>
<track> Определяет текст песни в медиаплееры
Тег 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 число
Устанавливает ширину видео.

Работа с видео в HTML5.

Всем привет! Сегодня мы подробно поговорим о такой мультимедийной возможности HTML5 как воспроизведение видео.

Для того, чтобы вставить видео на сайт, используется тег video.
<video src="path/to/video/file.mp4"></video>
У данного тега есть атрибут src, в который мы должны прописать путь до нашего видеоролика.

Если вы сейчас откроете страницу в браузере, то увидите картинку(постер), однако, больше ничего не будет. Вы никак не сможете взаимодействовать с видео.(Google Chrome).

Чтобы мы смогли увидеть элементы управления, такие, как шкала времени, воспроизведение/пауза, управление громкостью и полноэкранный режим, существует атрибут controls.
<video src="video.mp4" controls></video>
Если вам нужно, чтобы видео воспроизводилось сразу при загрузке страницы, используйте атрибут autoplay.
<video src="video.mp4" controls autoplay></video>
Атрибут loop используется для того, чтобы зациклить видео, т.е. для того, чтобы видео сразу же запускалось снова после того, как оно закончилось.
<video src="video.mp4" controls autoplay loop></video>
Есть еще такой интересный атрибут как preload. Как понятно из названия, он отвечает за предзагрузку видео. У него 3 значения:

none — означает, что никакой предзагрузки не будет. Не будет вообще никакой информации, даже такой, как длительность, уровень громкости и т.д.

metadata — это значение, наоборот, покажет нам ту информацию, которую не покажет значение none

auto — подгружает видео сразу после загрузки страницы, чтобы человек мог его сразу запустить и не ждать, пока оно загрузится. Что-то вроде полоски на YouTube, но тут она не отображается

Понятно, что если у вас стоят сразу 2 атрибута — preload и autoplay, то весь смысл атрибута preload пропадает.
<video src="video.mp4" controls preload="auto"></video>
Конечно же, у данного тега есть такие атрибуты как width и height, которые отвечают за ширину и высоту видео.
<video src="video.mp4" controls autoplay widht="500"></video>
При помощи атрибута poster вы можете выставить свою картинку, которая будет показываться до того, как вы воспроизведете видео.
<video src="video.mp4" controls poster="poster.png"></video>
Для того, чтобы выключить звук у видео, существует атрибут muted.
<video src="video.mp4" controls autoplay muted></video>
Также, в html5 video есть возможность указать промежуток времени, с которого начнется просмотр и когда он закончится. Для этого достаточно указать #t= после имени видеофайла и указать время начала и конца через запятую.
<video src="video.mp4#t=3,5" controls></video>
В примере выше мы указали, что видео должно начаться с 3 секунды и закончиться на 5.

Если вы хотите указать только время, с которого должен начаться просмотр, то можно указать только одно значение
<video src="video.mp4#t=3" controls autoplay></video>
В примере выше видео будет начинаться с 3 секунды и идти до конца.

Если же вы, наоборот, хотите указать, чтобы видео начиналось с самого начала и шло до какого-то определенного значения, то просто оставьте первый параметр пустым, поставьте запятую и укажите второй параметр — время конца видео.
<video src="video.mp4#t=,5" controls></video>
В примере выше видео начнется с самого начала и будет идти до 5-ой секунды.

Возможность встраивать видео в html появилась недавно и понятно, что старые браузеры не поддерживают данной возможности. Чтобы это исправить, мы можем написать им какой-то текст между тегами <video></video>
<video src="video.mp4" controls> К сожалению, ваш браузер не поддерживает HTML5 Video. </video>
Или вы можете встроить сюда какой-то другой плеер, например, на flash или javascript, и тогда видео смогут просмотреть даже пользователи старых браузеров.

Каждый современный браузер поддерживает свой формат видео, а старые браузеры имеют поддержку еще хуже. Чтобы поддерживать несколько форматов видео, существует тег source.
<video controls autoplay> <source src="video.mp4"></source> <source src="video.ogv"></source> </video>
При парсинге страницы браузер выберет тот формат, который он поддерживает, и подключит его. Файл подключается только один.

У тега source есть атрибут type, в котором мы указываем MIME тип и кодеки.
<video controls autoplay> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source> </video>
Указывать тип файла не обязательно, но желательно. Все дело в том, что чтобы определить, что это за файл, браузеру придется скачать его начало. Чтобы не напрягать лишний раз сеть, лучше всегда указывать атрибут type.

Итак, на этом все. Это все, что можно и нужно знать про HTML5 Video. Спасибо за внимание и удачи!

Создано 22.08.2014 20:40:25

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
HTML5 Video — HTML5 Rocks
Опубликовано: Август 3rd, 2010 Обновлено: Январь 9th, 2014 Comments:
Your browser may not support the functionality in this article.
Введение
Видеотег – это одна из самых популярных функций HTML5. Часто видеотег представляют как альтернативу технологии Flash на веб-сайтах, но это далеко не все, что он может. Он вошел в число тегов HTML совсем недавно, но его возможности и поддержка различными браузерами расширяются с поразительной скоростью. Как вы увидите в этом руководстве, основное преимущество видеотега – его естественная интеграция с другими уровнями веб-программирования, такими как CSS и JavaScript, а также с другими тегами HTML.
В этом руководстве раскрывается суть видеотега и демонстрируются различные примеры его интеграции с другими функциями HTML5, такими как <canvas>.
1. Разметка
Для демонстрации HTML-видео на сайте достаточно следующих линий:
<video> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> </video>
В этом фрагменте используется тег <source>, позволяющий указать несколько вариантов формата на случай, если какой-то из них не поддерживается браузером пользователя. Подробнее мы обсудим этот вопрос в следующем разделе.
Также можно использовать простой видеоформат, и тогда синтаксис будет таким же, как для тега изображений. В ближайшем будущем, когда все браузеры будут поддерживать единый видеоформат, этот синтаксис станет использоваться чаще всего.
<video src="movie.webm"></video>
А пока сосредоточимся на предыдущем, более распространенном сейчас варианте. Самый важный момент – правильно указать MIME-тип для обработки видеофайлов сервером в заголовке Content-Type. В противном случае видео может работать некорректно, даже если используется локальная копия с вашего сайта. В Apache httpd.conf достаточно добавить следующие строки:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
Если ваше приложение работает на платформе Google App Engine, нужно добавить в файл app.yaml примерно следующий код (отдельно для каждого формата):
- url: /(.*\.ogv) static_files: videos_folder/\1 mime_type: video/ogg upload: videos_folder/(.*\.ogv)
Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах source атрибут type. В этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения. Другими словами, он не будет загружать форматы, которые не сможет воспроизвести, а значит, сайт будет работать быстрее.
2. Видеоформаты
Видеоформат можно представить как ZIP-файл, содержащий закодированный видео- и аудиопоток. В Интернете актуальны форматы WEBM, MP4 и OGV:
MP4 = H.264 + AAC
OGG/OGV = Theora + Vorbis
WEBM = VP8 + Vorbis
Видеотег развивается удивительно быстро. Всего год назад он поддерживался только браузером Safari и только в стабильной версии. Теперь видео HTML5 поддерживают все современные браузеры, включая IE9. Что касается кодеков, разработчики Firefox, Chrome и Opera договорились включить поддержку WEBM в качестве общего
HTML Video
Элемент HTML используется для показать видео на веб-странице.
Элемент HTML
Чтобы показать видео в HTML, используйте элемент :
Пример
<управление видео>

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

Попробуй сам »
Как это работает
Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза и громкость.
Рекомендуется всегда включать атрибуты ширины и высоты . Если высота и ширина не установлены, страница может мерцать во время загрузки видео.
Элемент позволяет вам указать альтернативное видео файлы, из которых браузер может выбирать.Браузер будет использовать первый распознанный формат.
Текст между тегами и будет отображаться только в браузерах, которые не поддержка элемента.
HTML <видео> Автоигра
Для автоматического запуска видео используйте атрибут autoplay :
Пример
<автозапуск видео> Ваш браузер не поддерживает видео тег.
Попробуй сам " Атрибут autoplay не работает на мобильных устройствах, таких как iPad и iPhone. Поддержка браузера Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент. Элемент <видео> 4.0 9,0 3,5 4,0 10,5 HTML видео форматы Существует три поддерживаемых формата видео: MP4, WebM и Ogg. Браузер поддерживает различные форматы: Браузер MP4 WebM Ogg Internet Explorer ДА NO NO Chrome ДА ДА ДА Firefox ДА ДА ДА Safari ДА NO NO опера ДА (из Оперы 25) ДА ДА HTML-видео - Типы медиа Формат файла Тип носителя MP4 видео / mp4 WebM видео / веб Ogg видео / ogg HTML-видео - методы, свойства и события HTML определяет методы, свойства и события DOM для элемента . Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость. Существуют также события DOM, которые могут уведомлять вас о начале воспроизведения видео, его приостановке и т. Д. Для получения полной справки по DOM перейдите к нашей справке по HTML аудио / видео DOM. HTML видео теги . Tag Описание <видео> Определяет видео или фильм <источник> Определяет несколько медиаресурсов для медиаэлементов, таких как <дорожка> Определяет текстовые дорожки в медиаплеерах , HTML видео тег Пример Воспроизвести видео: <управление видео> Ваш браузер не поддерживает видео тег. Попробуй сам " Определение и использование
Тег используется для вставки видео содержимое в документе, например фрагмент ролика или другие видеопотоки.
Метка содержит один или несколько тегов. <источник> тегов с разными источниками видео. Браузер выберет первый источник опоры.
Текст между и теги будут отображаться только в браузерах, которые не поддерживают элемент
Существует три поддерживаемых формата видео в HTML: MP4, WebM и OGG.
Браузер MP4 WebM Ogg
Edge / IE ДА NO NO
Chrome ДА ДА ДА
Firefox ДА ДА ДА
Safari ДА NO NO
Опера ДА ДА ДА
Советы и заметки
Подсказка: Для аудиофайлов посмотрите на тег .
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
Элемент
<видео> 4,0 9,0 3,5 3,1 11,5
Необязательные атрибуты
Атрибут Значение Описание
автовоспроизведение автовоспроизведение Указывает, что воспроизведение видео начнется, как только оно будет готово.
контролирует контролирует Указывает, что должны отображаться элементы управления видео (например, кнопка воспроизведения / паузы и т. Д.).
высота пикселей Устанавливает высоту видео плеера
петля петля Указывает, что видео будет начинаться заново, каждый раз, когда оно заканчивается
приглушенный приглушенный Указывает, что аудиовыход видео должен быть отключен.
плакат URL Указывает изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения
преднагрузка авто
метаданные
нет Указывает, считает ли автор, как видео должно загружаться при загрузке страницы, и как.
SRC URL Определяет URL видеофайла
ширина пикселей Устанавливает ширину видео плеера
глобальных атрибутов
Тег
Атрибуты события
Тег
Связанные страницы
HTML DOM ссылка: HTML Аудио / Видео Ссылка DOM
Настройки CSS по умолчанию
Нет.

,
HTML Tutorial — Вставка видео в HTML-страницы
» HTML » Учебник HTML — Вставка видео в HTML-страницы
Видеофайл можно вставить в HTML-страницу двумя способами. Первым способом будет использование тега . Этот тег не нуждается в теге окончания / окончания. Работает, в основном, так же, как тег для фото.
html
Кроме того, вы можете вставить видеофайл, используя ссылку.
html название фильма
Поддерживаемые расширения для тега вставки
Это:
.swf — сделано Macromedia Flash
.wmv — Microsoft Windows Media Video
.mov — фильм Quick Time, принадлежит Apple
.mpeg — создан экспертной группой Moving Pictures.
Из-за компактного формата наиболее часто используются .mpeg и .swf,
Атрибуты
тега встраивания
autostart — устанавливает, будет ли файл запускаться автоматически после загрузки страницы.Может иметь значение true или false
скрыто — устанавливает, являются ли кнопки скрытыми или нет. Может иметь значение true или false.
том — может иметь любое значение от 0 до 100
цикл — устанавливает, будет ли файл воспроизводиться после его завершения. Может иметь значение true или false.
playcount — определяет, сколько раз файл будет воспроизведен. Например, playcount = «2» означает, что он будет воспроизведен два раза и после этого остановится.
Вставка видео YouTube с помощью тега вставки
Это можно сделать очень просто, поскольку YouTube предоставляет вам HTML-код.
html

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

Атрибут	Значения	Описание
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	число	Устанавливает ширину видео.

Формат файла	Тип носителя
MP4	видео / mp4
WebM	видео / веб
Ogg	видео / ogg

Tag	Описание
<видео>	Определяет видео или фильм
<источник>	Определяет несколько медиаресурсов для медиаэлементов, таких как
<дорожка>	Определяет текстовые дорожки в медиаплеерах

Браузер	MP4	WebM	Ogg
Edge / IE	ДА	NO	NO
Chrome	ДА	ДА	ДА
Firefox	ДА	ДА	ДА
Safari	ДА	NO	NO
Опера	ДА	ДА	ДА

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

Видео html: HTML5 Video — от А до Я / Хабр

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

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

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

Атрибуты

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

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

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

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

— Веб-технологии для разработчиков

Контекст Использования

Атрибуты

События

Примеры

Multiple Sources Example

Server support

Интерфейс DOM

Совместимость браузера

Смотрите также

| HTML | WebReference

Синтаксис

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

Атрибуты

Пример

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

Браузеры

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

HTML Видео

Воспроизведение видео в формате HTML

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

Элемент <video> HTML

Пример

Как это работает?

Автозапуск <video> HTML

Пример

Видео HTML — Поддержка браузеров

Видео HTML — Тип носителя

Видео HTML — Методы, свойства и события

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

Тег video HTML5

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

Синтаксис

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

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

Атрибуты

Работа с видео в HTML5.

HTML5 Video — HTML5 Rocks

Введение

1. Разметка

2. Видеоформаты

HTML Video

Элемент HTML

Пример

Как это работает

HTML <видео> Автоигра

Пример

HTML видео форматы

HTML-видео - Типы медиа

HTML-видео - методы, свойства и события

HTML видео теги

HTML видео тег

Пример

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

Советы и заметки

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

Необязательные атрибуты

глобальных атрибутов

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

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

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

HTML Tutorial — Вставка видео в HTML-страницы

Поддерживаемые расширения для тега вставки

тега встраивания

Вставка видео YouTube с помощью тега вставки

HTML5 video tag

Демо

HTML YouTube видео

боретесь с видеоформатами?

YouTube Video Id

Воспроизведение видео на YouTube в формате HTML

`Пример`