Содержание

Тег | 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 <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/vorbis17411.53.5
wav12811.543.5
mp3912415422
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

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

Как научиться разрабатывать сайты

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.

Всем привет! Сегодня мы подробно поговорим о такой мультимедийной возможности 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. Спасибо за внимание и удачи!

  • Работа с видео в HTML5. Создано 22.08.2014 20:40:25
  • Работа с видео в HTML5. Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

HTML5 Video — HTML5 Rocks

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

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

Вы также узнаете, что сценарии YouTube для встраивания недопустимы в формате XHTML. Но не волнуйтесь, проведите поиск, и вы найдете множество инструментов для генерации действительных кодов XHTML для видео на YouTube.

Вы также можете найти здесь хорошее руководство по вставке видео YouTube в CMS, такую ​​как WordPress, Joomla или Drupal, презентации PowerPoint, Gmail и некоторые другие интересные вещи.

HTML5 video tag

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

Видео тег используется для добавления видео на html-страницу. На данный момент видео тег HTML 9004 поддерживает 3 типа видеофайлов:

  • mp4 — видео MIME-типа / mp4
  • webm — видео / веб-MIME-тип
  • ogg — MIME- тип video / ogg
 html  <управление видео>
  
  
Ваш браузер не поддерживает видео тег.
  
Демо

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

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

Browser MP4 WebM Ogg
Internet Explorer
хром
Firefox
Safari
Opera (Opera 25+)

,

HTML YouTube видео


Самый простой способ воспроизвести видео в HTML — это использовать YouTube.


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

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

Преобразование видео в разные форматы может быть трудным и длительным.

Более простое решение — позволить YouTube воспроизводить видео на вашей веб-странице.


YouTube Video Id

YouTube будет отображать идентификатор (например, tgbNymZ7vqY), когда вы сохраняете (или воспроизводите) видео.

Вы можете использовать этот идентификатор и сослаться на свое видео в HTML-коде.


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

Чтобы воспроизвести видео на веб-странице, выполните следующие действия.

  • Загрузить видео на YouTube
  • Обратите внимание на видео идентификатор
  • Определите элемент