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

Чтобы показать видео в формате HTML, используйте элемент :

Пример

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

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

Атрибут Controls добавляет элементы управления видео, такие как воспроизведение, пауза и громкость.

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

Элемент позволяет указать альтернативное видео файлы, которые может выбрать браузер.Браузер будет использовать первый распознанный формат.

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

HTML

Для автоматического запуска видео используйте атрибут autoplay :

Пример

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

Примечание. Браузеры Chromium не разрешить автозапуск в большинстве случаев. Однако приглушенный автозапуск всегда разрешен.

Добавить приглушенный после autoplay , чтобы ваше видео начинало воспроизводиться автоматически (но без звука):

Пример

<автовоспроизведение видео отключено>
 
 
Ваш браузер не поддерживает тег видео.

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

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

Форматы HTML-видео

Поддерживаются три видеоформата: MP4, WebM и Ogg. Браузер поддерживает различные форматы:

HTML-видео — типы носителей

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

HTML DOM определяет методы, свойства и события для элемента .

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

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

Полную справку по DOM см. в нашем справочнике по HTML Audio/Video DOM.

Теги HTML-видео

: Элемент Video Embed — HTML: Язык гипертекстовой разметки

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

В приведенном выше примере показано простое использование элемента . Аналогично элементу , мы включаем путь к медиафайлу, который хотим отобразить, внутри атрибута src ; мы можем включить другие атрибуты, чтобы указать такую ​​информацию, как ширина и высота видео, хотим ли мы, чтобы оно автоматически воспроизводилось и зацикливалось, хотим ли мы отображать элементы управления видео по умолчанию в браузере и т. д.

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

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

автовоспроизведение

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

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

Чтобы отключить автовоспроизведение видео, autoplay="false" не сработает; видео будет воспроизводиться автоматически, если атрибут вообще присутствует.Чтобы удалить автовоспроизведение, атрибут нужно удалить вообще.

В некоторых браузерах (например, Chrome 70.0) автовоспроизведение не работает, если отсутствует атрибут muted .

автокартинка в картинке

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

органы управления

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

список управления

Атрибут controllist , если он задан, помогает браузеру выбрать, какие элементы управления отображать в медиа-элементе всякий раз, когда браузер показывает свой собственный набор элементов управления (например,грамм. когда атрибут управляет атрибутом ).

Допустимые значения: nodownload , nofullscreen и noremoteplayback .

Используйте атрибут disablepictureinpicture , если вы хотите отключить режим «картинка в картинке» (и элемент управления).

перекрестное происхождение

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

анонимный

Отправляет перекрестный запрос без учетных данных. Другими словами, он отправляет HTTP-заголовок Origin: без файла cookie, сертификата X.509 или выполнения базовой HTTP-аутентификации. Если сервер не предоставляет учетные данные для исходного сайта (не устанавливая HTTP-заголовок Access-Control-Allow-Origin: ), изображение будет испорчено , и его использование будет ограничено.

использование учетных данных

Отправляет перекрестный запрос с учетными данными. Другими словами, он отправляет HTTP-заголовок Origin: с файлом cookie, сертификатом или базовой HTTP-аутентификацией. Если сервер не передает учетные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials: ), изображение будет испорчено , и его использование будет ограничено.

Если ресурс отсутствует, он извлекается без запроса CORS (т.е. без отправки HTTP-заголовка Origin: ), предотвращая его неиспорченное использование в элементах . Если оно недействительно, оно обрабатывается так, как если бы использовалось перечислимое ключевое слово анонимный . Дополнительную информацию см. в атрибутах настроек CORS.

отключить изображение в изображении

Запрещает браузеру предлагать контекстное меню «Картинка в картинке» или автоматически запрашивать функцию «Картинка в картинке» в некоторых случаях.

отключить дистанционное воспроизведение

Логический атрибут, используемый для отключения возможности удаленного воспроизведения на устройствах, подключенных с помощью проводных (HDMI, DVI и т. д.) и беспроводных технологий (Miracast, Chromecast, DLNA, AirPlay и т. д.).

В Safari вы можете использовать x-webkit-airplay="deny" в качестве запасного варианта.

высота

Высота области отображения видео в пикселях CSS (только абсолютные значения, без процентов.)

петля

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

приглушенный

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

playsinline

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

плакат

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

предварительная нагрузка

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

.

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

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

Примечание:

• Атрибут autoplay имеет приоритет над preload .Если указано autoplay , браузеру, очевидно, потребуется начать загрузку видео для воспроизведения.
• Спецификация не обязывает браузер следовать значению этого атрибута; это просто намек.

источник

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

ширина

Ширина области отображения видео в пикселях CSS (только абсолютные значения, без процентов).

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

  <управление видео>
  
  <источник источника = "мое видео.mp4" тип="видео/mp4">
  
Ваш браузер не поддерживает видео HTML5. Вот
     вместо этого ссылка на видео.

  

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

Другие примечания по использованию:

• Если вы не укажете атрибут elements , видео не будет включать элементы управления браузера по умолчанию; вы можете создавать свои собственные элементы управления с помощью JavaScript и API HTMLMediaElement .Подробнее см. в разделе Создание кроссбраузерного видеоплеера.
• Чтобы обеспечить точный контроль над вашим видео (и аудио) контентом, HTMLMediaElement запускают множество различных событий. Эти события не только обеспечивают управляемость, но и позволяют отслеживать ход загрузки и воспроизведения мультимедиа, а также состояние и позицию воспроизведения.
• Свойство object-position можно использовать для настройки положения видео в кадре элемента, а свойство object-fit — для управления тем, как регулируется размер видео, чтобы оно соответствовало кадру.
• Чтобы показывать субтитры/заголовки вместе с вашим видео, вы можете использовать JavaScript вместе с элементом и форматом WebVTT. Дополнительную информацию см. в разделе Добавление титров и субтитров к видео в формате HTML5.
• Вы можете воспроизводить аудиофайлы с помощью элемента . Это может быть полезно, если, например, вам нужно воспроизвести звук с расшифровкой WebVTT, так как элемент не разрешает субтитры с использованием WebVTT.
• Чтобы протестировать запасной контент в браузерах, поддерживающих этот элемент, вы можете заменить несуществующим элементом, например .

Хорошим общим источником информации об использовании HTML является руководство для начинающих по видео- и аудиоконтенту.

Стилизация с помощью CSS

Элемент является замененным элементом — его display значение по умолчанию равно inline , но его ширина и высота по умолчанию в окне просмотра определяются встраиваемым видео.

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

Обнаружение добавления и удаления дорожек

Вы можете определить, когда дорожки добавляются и удаляются из элемента , используя события addtrack и removetrack . Однако эти события не отправляются непосредственно самому элементу . Вместо этого они отправляются в объект списка дорожек в элементе HTMLMediaElement , который соответствует типу дорожки, добавленной к элементу:

HTMLMediaElement.аудиотреки

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

HTMLMediaElement.videoTracks

Добавьте прослушиватель addtrack к этому объекту VideoTrackList , чтобы получать информацию о добавлении видеодорожек к элементу.

HTMLMediaElement.текстовые треки

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

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

  var elem = document.querySelector("видео");

elem.audioTracks.onaddtrack = функция (событие) {
  trackEditor.addTrack(event.track);
};

элементaudioTracks.onremovetrack = функция (событие) {
  trackEditor.removeTrack(event.track);
};
  

Этот код отслеживает добавление и удаление звуковых дорожек из элемента и вызывает гипотетическую функцию в редакторе дорожек для регистрации и удаления дорожки из списка доступных дорожек редактора.

Вы также можете использовать addEventListener() для прослушивания событий addtrack и removetrack .

Простой пример видео

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

 


<управление видео
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    плакат="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
   >

Извините, ваш браузер не поддерживает встроенные видео,
но не волнуйтесь, вы можете скачать
и смотрите его в своем любимом видеоплеере!


  

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

Пример с несколькими источниками

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

 


<управление видео
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
  <источник
    src="https://archive.org/download/ElephantsDream/ed_hd.ОГВ"
    тип="видео/огг">
  <источник
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    тип="видео/ави">
  <источник
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    тип="видео/mp4">

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

  

Пробуется первый WebM. Если это невозможно воспроизвести, то пробуется MP4. Наконец, Ogg судят. Резервное сообщение отображается, если элемент видео не поддерживается, но не в случае сбоя всех источников.

Некоторые типы мультимедийных файлов позволяют предоставлять более конкретную информацию с помощью параметра codecs как части строки типа файла. Относительно простой пример — видео/webm; codecs="vp8, vorbis" , в котором говорится, что файл представляет собой видео WebM, использующее VP8 для видео и Vorbis для аудио.

Поддержка сервером видео

Если тип MIME для видео не установлен правильно на сервере, видео может не отображаться или отображаться серым прямоугольником со знаком X (если включен JavaScript).

Если вы используете веб-сервер Apache для обслуживания видео Ogg Theora, вы можете решить эту проблему, добавив расширения типа видеофайла к типу MIME «video/ogg». Наиболее распространенными расширениями типов видеофайлов являются «.ogm», «.ogv» или «.ogg». Для этого отредактируйте файл «mime.types» в «/etc/apache» или используйте директиву конфигурации «AddType» в httpd.conf .

 AddType видео/ogg .ogm
Видео AddType/ogg .ogv
Видео AddType/ogg .ogg
 

Если вы предоставляете свои видео как WebM, вы можете решить эту проблему для веб-сервера Apache, добавив расширение, используемое вашими видеофайлами (.webm» является наиболее распространенным) в тип MIME «video/webm» через файл «mime.types» в «/etc/apache» или через директиву конфигурации «AddType» в httpd.conf .

 AddType видео/webm .webm
 

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

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

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

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

В дополнение к разговорному диалогу субтитры и стенограммы также должны идентифицировать музыку и звуковые эффекты, которые передают важную информацию. Сюда входят эмоции и тон:

 14
00:03:14 --> 00:03:18
[Драматическая рок-музыка]

15
00:03:19 --> 00:03:21
[шепотом] Что это там вдалеке?

16
00:03:22 --> 00:03:24
Это… это…

16 00:03:25 --> 00:03:32
[Громкий стук]
[Звенит посуда]
 

Подписи не должны загораживать основную тему видео.Их можно расположить с помощью настройки метки align VTT.

Таблицы BCD загружаются только в браузере

Тег HTML »

Элемент из

Всевозможные способы встраивания современных мультимедиа с HTML-кодом

Что делает HTML-тег ?

Элемент

Дисплей

встроенный

Пример кода

 
  К сожалению, ваш браузер не поддерживает HTML5 video, но вы можете
  скачать это видео из архива Интернет-архив.
  

Добавление видео на веб-страницы

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

Многие веб-сайты видеохостинга, такие как YouTube и Vimeo, предоставляют код для встраивания видео, который использует iframe , а не тег video . Какой тег следует использовать при встраивании видео из службы потокового видео, например YouTube или Vimeo? Почти во всех случаях имеет смысл использовать код для встраивания, предоставляемый службой потокового видео.Делая это, вы получаете преимущества всех методов оптимизации, встроенных в видеоплеер службы потоковой передачи. Оптимизация поможет повысить скорость воспроизведения, а также будет включать резервные варианты для пользователей старых браузеров.

HTML5 Video Tag » Полное руководство [2022]

Это наше полное руководство по тегу HTML5 Video в 2022 году.

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

Сюда входят:

• Что такое тег видео HTML5?

• Как работает HTML5-видео?

• Распространенные проблемы с тегом видео HTML5

• Кроссбраузерная совместимость тегов видео HTML5

• Как улучшить доступность видео

• Элементы атрибута

• Адаптивное видео: как сделать ваши видео удобными для мобильных устройств и планшетов

Если вы хотите расширить потенциал видео в 2022 году, то вы определенно попали по адресу!

Давайте начнем, но сначала: 

Элемент `video` был впервые предложен Opera в 2007 году, а затем был добавлен в спецификацию HTML5.До этого, если вы хотели добавить видео на HTML-страницу, вам приходилось использовать Adobe Flash.

С этим было несколько проблем: Flash имеет длинную историю недостатков безопасности, интенсивно использует ЦП и не поддерживается на Android или iOS.

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

В этом руководстве мы покажем вам, как его использовать.

Вы узнаете как об основных, так и о расширенных вариантах использования элемента `video`, как гарантировать, что ваши видео воспроизводятся в браузерах, предоставляя несколько видеоисточников, как сделать ваши видео доступными, включая титры/субтитры с помощью WebVTT, а также как чтобы убедиться, что ваши видео остаются отзывчивыми.

Элемент `

Чтобы добавить видео на свою страницу с помощью элемента `

Давайте разберем это:

Указывает, что такие элементы управления видео, как «Воспроизведение», «Пауза», «Громкость» и т. д.должно отображаться, позволяя пользователю управлять воспроизведением видео.

`

Указывает местоположение или путь к видеофайлу, который вы хотите встроить.

Определяет тип или формат MIME видеофайла, помогая браузеру заранее определить, может ли он декодировать файл. Это приводит к более быстрой загрузке и рендерингу.

`

Текст в этом теге служит резервным содержимым, которое будет отображаться, если браузер пользователя не поддерживает элемент `video` или формат встроенного видео.

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

Это хорошо, но недостаточно.  

Проблема в том, что разные браузеры не поддерживают одни и те же форматы мультимедиа в своих реализациях HTML5 `

Это означает, что формат MP4 может не поддерживаться текущим браузером пользователя. На самом деле, в настоящее время MP4 плохо поддерживается в Firefox для Android.

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

Так как же убедиться, что ваше видео воспроизводится во всех браузерах на всех платформах?

В настоящее время спецификация HTML5 поддерживает три видеоформата:

— ВебМ

— Огг

– MP4

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

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

Вот пример кода, который мы используем для этого:

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

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

«Значит ли это, что я должен каждый раз конвертировать все свои видео в три разных формата?»

На мой взгляд, включать все три формата излишне.Я бы предложил использовать MP4 и WebM. MP4 имеет наибольшую поддержку браузерами, а браузеры, которые не поддерживают его, полностью поддерживают WebM. Я предлагаю WebM, а не Ogg, потому что он высокого качества, с открытым исходным кодом и имеет меньший размер файлов, что делает его очень эффективным для мобильных устройств.

Помимо совместимости с разными браузерами, HTML5 `

Давайте посмотрим на некоторые из них:

Задайте ширину и высоту в пикселях, чтобы предотвратить мерцание и сдвиг страницы до того, как браузер загрузит видео.

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

Указывает, что видео должно быть отключено при загрузке. Затем пользователь может решить, включать звук или нет.

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

Предоставляет URL-адрес изображения, которое можно использовать в качестве заставки или эскиза перед воспроизведением видео.Обратите внимание: если вы собираетесь указать изображение постера, то нет необходимости включать атрибут autoplay, поскольку он переопределяет атрибут poster.

Возвращает продолжительность видео в секундах. Вы можете использовать JavaScript для обработки и отображения этой информации в любом формате по вашему выбору.

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

Указывает браузеру предварительно загрузить видео для более быстрого воспроизведения. Обратите внимание, что свойство preload игнорируется, если присутствует `autoplay`. Возможные значения:

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

Приказывает браузеру загрузить все видео.

Нет предварительной нагрузки.

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

Давайте посмотрим, как сделать так, чтобы видео, встроенные в веб-страницу, оставались доступными для различных аудиторий.

«Сила Интернета в его универсальности.Доступ для всех, независимо от инвалидности, является важным аспектом». – Тим Бернерс-Ли

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

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

Технология для достижения этого в Интернете известна как формат текстовых дорожек веб-видео или WebVTT. Это формат для отображения синхронизированных текстовых дорожек вместе с видео с использованием элемента HTML``.

Вот изображение типичного файла WebVTT:

Примечание. Диапазон времени должен быть в формате _hh:mm:ss:ttt_ или _mm:ss:tt_, где _hh_ – это часы и должно содержать до двух цифр, _mm_ – минуты (0–59), _ss_ – секунды (0–59). –59), _ttt_ — миллисекунды (0–999).

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

Создав этот файл, вы можете встроить его в HTML-видео с помощью элемента `` следующим образом:

Здесь мы объясняем, что делает каждый атрибут в элементе ``:

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

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

Указывает тип предоставленной текстовой дорожки. Возможные значения:

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

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

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

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

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

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

Вот пример видео HTML5 с субтитрами, с участием разработчика Gift Egwuenu

Вы видели атрибуты `width` и `height` элемента видео HTML5 и то, как их можно использовать для установки статических размеров видео.

Но вот в чем дело:

Объявление статической ширины не является хорошей идеей, когда речь идет об отзывчивости.

Что происходит, когда родительский контейнер для этого видео сжимается меньше заявленной ширины?

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

Например, видео на изображении ниже имеет статическую ширину 600 пикселей. При доступе через мобильное устройство с разрешением 350 пикселей он переполняет область просмотра.

Вот пример неотвечающего видео на мобильном телефоне

Чтобы сделать элемент `

Вот изображение видеоэлемента с поддержкой CSS:

Здесь мы установили для видео высоту `auto`, чтобы гарантировать, что исходное соотношение сторон видеоконтента сохраняется на всех экранах.

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

Обратите внимание, как теперь он хорошо вписывается в экран.

Пример адаптивного HTML5-видео

Если вы хотите, чтобы видео содержалось в разделе, вы можете просто обернуть элемент `

  

  <голова>
    
    <стиль>
      видео{
        ширина: 300 пикселей;
        высота: 200 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <управление видео отключено src="/build/videos/arcnet.io(7-sec).mp4">
      
    
    
Некоторая информация о видео
  
  

  

  <голова>
    
    <стиль>
      видео {
        ширина: 300 пикселей;
        высота: 220 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <управление видео>
      
      
    
    
Некоторая информация о видео