<video>: Элемент вставки видео

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

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

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

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

autoplay

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

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

Для отключения автоматического воспроизведения видео, autoplay="false" не сработает; видео будет воспроизводиться автоматически, если этот атрибут вообще присутствует в теге <video>. Чтобы удалить автоматическое воспроизведение, необходимо полностью удалить этот атрибут.

controls

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

controlslist

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

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

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

crossorigin

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

anonymous

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

use-credentials

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

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

disablepictureinpicture

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

disableremoteplayback

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

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

height

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

loop

Булевый атрибут; если указан, браузер автоматически перемотает воспроизведение к началу по достижении конца видео.

muted

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

playsinline

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

poster

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

preload

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

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

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

Примечание:

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

src

URL видео для встраивания. Это необязательно; вместо этого можно использовать элемент <source> внутри блока видео для указания встраиваемого видео.

width

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

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

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4" download="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

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

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

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

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

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

Для стилизации <video> нет особых требований; распространённая стратегия — установить для него значение display в block для удобства позиционирования, изменения размера и т. д., а затем предоставить необходимые сведения о стиле и макете. Основы стилизации видеоплеера предоставляет полезные техники стилизации.

Временные текстовые дорожки для субтитров, субтитров, заголовков глав и т. д. можно добавить декларативно, вложив элемент <track>. Дорожки указаны в формате Web Video Text Tracks File Format (WebVTT) (файлы .vtt).

Например, в HTML ниже включен файл "captions.vtt", который будет использоваться для наложения субтитров на видео, если субтитры включены пользователем.

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

Временные текстовые дорожки также можно добавить программно с помощью API WebVTT.

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

HTMLMediaElement.audioTracks

Список AudioTrackList, содержащий все аудиодорожки медиаэлемента. Добавьте обработчик события addtrack к этому объекту, чтобы получать уведомления о добавлении новых аудиодорожек в элемент.

HTMLMediaElement.videoTracks

Список VideoTrackList, содержащий все видеодорожки медиаэлемента. Добавьте обработчик события addtrack к этому объекту, чтобы получать уведомления о добавлении видеодорожек в элемент.

HTMLMediaElement.textTracks

Список TextTrackList, содержащий все текстовые дорожки медиаэлемента (используемые для субтитров, титров и т. д.). Добавьте обработчик события addtrack к этому объекту, чтобы получать уведомления о добавлении текстовых дорожек в элемент.

Например, чтобы обнаружить добавление или удаление аудиодорожек из элемента <video> можно использовать такой код:

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

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

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

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

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

AddType video/webm .webm

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

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

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

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

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

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Субтитры не должны заслонять основной объект видео. Их можно расположить с помощью настройки align VTT cue.

• Формат Web Video Text Tracks (WebVTT)
• WebAIM: Субтитры, транскрипты и аудиоописания
• MDN Понимание WCAG, объяснения пункта 1.2
• Понимание критерия успеха 1.2.1 | W3C Понимание WCAG 2.0
• Понимание критерия успеха 1.2.2 | W3C Понимание WCAG 2.0

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

HTML

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Результат

До начала воспроизведения видео отображается изображение, указанное в атрибуте poster. Если браузер не поддерживает воспроизведение видео, отображается запасной текст.

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

HTML

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

Результат

Сначала проверяется AVI. Если он не воспроизводится, проверяется MP4. Если ни один источник не поддерживается, отображается сообщение об ошибке.

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

• Руководство по типам и форматам медиафайлов в сети
  • Форматы контейнеров медиафайлов (типы файлов)
  • Руководство по кодекам видео для веб-сайтов
  • Руководство по кодекам аудио для веб-сайтов
• Позиционирование и изменение размера изображения внутри его рамки: object-position и object-fit
• <audio>
• Использование HTML аудио и видео
• Обработка видео с помощью canvas
• Настройка серверов для Ogg медиа