Аудио и видео в HTML5 - Учим HTML

Раньше нативные веб-технологии, такие как HTML, не позволяли встраивать видео и аудио в Web. Популярность получили технологии на основе плагинов для обработки такого контента, но у них было много проблем, включая плохую совместимость с возможностями HTML/CSS, а также проблемы безопасности и доступности. Позже спецификация HTML5 представила такие возможности с помощью элементов <video> и <audio>.

Элемент <audio> используется для встраивания аудиофайлов на веб-страницу, а элемент <video> — для встраивания видео.

Как добавить аудио на веб-страницу

До HTML5 аудиофайлы добавлялись на страницу в виде фонового звука с помощью нестандартного тега <bgsound>. Файл воспроизводился во время просмотра страницы, и пользователь не мог отключить звук. В HTML5 мы можем встраивать аудиофайлы с помощью тега <audio>, и нет необходимости подключать сторонние плагины. Элемент audio можно управлять с помощью HTML или Javascript и стилизовать с помощью CSS.

В коде атрибут src указывает на URL аудиофайла, а атрибут controls добавляет панель управления (кнопка воспроизведения, полоса прокрутки, регулятор громкости).

Audio and Video in HTML5

<audio src="name.ogg" controls></audio>

Внимание

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

Аудиокодеки и форматы аудиофайлов

Поскольку не все браузеры поддерживают все аудиоформаты, аудиофайл кодируется/декодируется с помощью аудиокодека (цифрового электронного устройства или программного приложения на базе компьютера, которое помогает в сжатии и распаковке цифровых аудиоданных). Все форматы аудиофайлов добавляются одновременно через элемент <source> с атрибутом src.

При определении разных форматов файлов мы рекомендуем указывать MIME-type для каждого файла, чтобы браузер мог выбрать поддерживаемый формат. MIME-type задаётся с помощью атрибута type. Браузер использует первый <source>, который он может воспроизвести, поэтому располагайте форматы от наиболее предпочтительного или наиболее широко поддерживаемого к наименее.

Пример добавления разных форматов аудиофайлов:

Example of Audio Codecs and Audio File Formats

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls>
     <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
     <source src="/build/audios/audio.mp3" type="audio/mpeg" />
   </audio>
   <p>Click the play button</p>
 </body>
</html>

Попробуйте сами »

Наиболее популярные аудиоформаты:

MP3 — самый популярный аудиоформат, использующий сжатие с потерями для уменьшения размера файла. Поддерживается практически каждым браузером, поэтому является надёжным вариантом <source> по умолчанию.

AAC (Advanced Audio Codec) — альтернатива MP3, обеспечивающая более высокое качество при той же или более сильной степени сжатия. Широко поддерживается современными браузерами (указывается как audio/mp4 или audio/aac).

Ogg Vorbis — свободный формат с открытым исходным кодом, поддерживаемый в Firefox и Chrome, но не в Safari. Обеспечивает хорошее качество звука, но реже используется устройствами воспроизведения.

Поддержка кодеков и браузеров, кратко: MP3 и AAC поддерживаются практически повсеместно, включая Safari, поэтому один из них следует указать как запасной <source>. Ogg Vorbis и WebM (Opus) являются форматами без роялти и воспроизводятся в Firefox и Chrome, но не в Safari. Распространённый и безопасный порядок: сначала открытый формат, а MP3/AAC — последними, чтобы каждый браузер нашёл подходящий вариант.

Как добавить видеофайлы

В предыдущей версии HTML видео встраивалось на сайт через сторонние плагины, такие как QuickTime, RealPlayer или Flash. В HTML5 появился новый тег <video>, который используется для вставки видео на веб-страницу.

В коде это выглядит так:

Audio and Video in HTML5

<video src="example.webm" controls></video>

Атрибут src указывает URL файла, а атрибут controls используется для отображения элементов управления воспроизведением.

Автовоспроизведение, атрибут muted и доступность

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

<video autoplay muted controls src="example.webm"></video>

Используйте автовоспроизведение с осторожностью. Медиафайл, начинающийся сам по себе, особенно со звуком, дезориентирует пользователей экранных читалок и людей с когнитивными или вестибулярными нарушениями. WCAG требует, чтобы для любого звука, воспроизводящегося дольше трёх секунд, была предусмотрена возможность его приостановить или остановить — поэтому всегда сохраняйте атрибут controls при использовании autoplay.

Атрибут poster

Для <video> атрибут poster задаёт изображение-заставку, которое отображается до начала воспроизведения видео (или во время его загрузки). Это позволяет показать пользователю содержательный предпросмотр вместо пустого кадра:

<video controls poster="/build/images/preview.jpg" src="example.webm"></video>

Атрибут preload

Атрибут preload подсказывает браузеру, сколько данных следует буферизировать до нажатия кнопки воспроизведения:

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

preload является лишь подсказкой, и браузеры могут её игнорировать. На мобильных устройствах или страницах с ограниченным трафиком предпочтительнее использовать metadata или none, чтобы не загружать большие файлы, которые пользователь, возможно, так и не посмотрит.

Видеокодеки и форматы видеофайлов

Каждый браузер поддерживает определённый набор кодеков, поэтому для воспроизведения видео во всех браузерах файл следует предоставить в нескольких форматах. Как и в случае с аудиофайлами, каждый формат перечисляется в отдельном элементе <source>, начиная с наиболее предпочтительного. Каждый видеофайл должен иметь свой MIME-type, задаваемый атрибутом type.

Чтобы убедиться, что сервер корректно передаёт видеофайлы браузеру, может потребоваться объявить MIME-типы в конфигурации сервера (см. ниже).

Пример добавления разных форматов видеофайлов:

Example of Video Codecs and Video File Formats

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Попробуйте сами »

Сегодня существует 3 основных видеоформата: MP4/MPEG-4, OGG и WebM. Для сжатия видеоданных и их воспроизведения мы используем кодеки.

Для видеофайла формата MPEG-4 используются видеокодек H.264 и аудиокодек AAC. Если вы хотите использовать эти кодеки, необходимо получить лицензию.

Для видеофайла Ogg используйте видеокодек Theora с открытым исходным кодом и аудиокодек Vorbis.

Для видеофайлов формата WebM используйте видеокодек VP8 (или VP9) и аудиокодек Vorbis (или Opus). В этом случае лицензия не требуется.

Настройка корректных MIME-типов

Сервер сообщает браузеру тип отправляемого файла через заголовок ответа Content-Type (MIME-тип). Если сервер отправляет медиафайл с неверным или отсутствующим MIME-типом, браузер может отказаться от воспроизведения даже при поддержке кодека. Многие серверы не настроены для отдачи файлов Ogg, WebM или MP4 из коробки, поэтому может потребоваться добавить соответствующие настройки вручную.

На Apache добавьте следующее в файл .htaccess в папке вашего сайта:

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

На Nginx добавьте соответствующие записи в блок types { ... } (обычно в mime.types):

types {
    audio/ogg  oga;
    audio/wav  wav;
    video/ogg  ogv ogg;
    video/mp4  mp4;
    video/webm webm;
}

Как добавить субтитры и заголовки

Текстовые дорожки — субтитры и заголовки — добавляются к аудио- и видеофайлам с помощью элемента <track>, который используется как дочерний элемент <audio> или <video>. Каждая дорожка указывает на файл WebVTT (.vtt).

Предоставление субтитров для заранее записанного медиаконтента является требованием доступности: <track kind="captions"> соответствует критерию успеха WCAG 2.1 1.2.2, на который опираются глухие и слабослышащие пользователи для понимания аудиосодержания.

Атрибут kind сообщает браузеру тип текстовой дорожки:

subtitles — перевод или транскрипция диалогов для зрителей, которые слышат, но не понимают язык. Значение по умолчанию.
captions — аналогично субтитрам, но также описывает звуковые эффекты и другие аудиосигналы для зрителей, которые не могут слышать.
descriptions — текстовое описание видеосодержания, предназначенное для озвучивания пользователям, которые не могут видеть экран.
chapters — названия глав, используемые для навигации по медиафайлу.
metadata — дорожки, используемые скриптами и не отображаемые пользователю.

Пример добавления субтитров к видеофайлу:

Captions for a video file with the track element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="captions" label="English" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt" />
    </video>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Попробуйте сами »

Совет

Чтобы выровнять видеоплеер на странице, поместите элемент <video> в контейнер <div>, назначьте ему класс, а затем задайте для него ширину и высоту, соответствующие размеру вашего видео.

Атрибуты аудио и видео

Attribute	Description
autoplay	Позволяет аудио/видео автоматически начинать воспроизведение, пока загружается остальная часть страницы.
controls	Позволяет управлять воспроизведением аудио/видео, включая громкость, паузу/возобновление воспроизведения.
loop	Позволяет аудио/видео воспроизводиться снова после завершения.
muted	По умолчанию воспроизводит медиафайл с выключенным звуком.
preload	Указывает буферизацию больших файлов. Может иметь одно из следующих значений: "none" (не буферизует файл), "auto" (буферизует медиафайл) или "metadata" (буферизует только метаданные файла).
src	URL аудио/видео для встраивания. Необязательный атрибут.
poster	URL изображения, отображаемого перед воспроизведением видео.
width	Указывает ширину области отображения видео в пикселях CSS.
height	Указывает высоту области отображения видео в пикселях CSS.

Практика

Какие два элемента HTML5 позволяют встраивать медиафайлы напрямую, без плагинов?

Элемент audio и элемент videoЭлемент embed и элемент fileЭлемент multimedia и элемент soundЭлемент mp3 и элемент mp4

Практика

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

Без звука (muted), так как браузеры блокируют автовоспроизведение со звукомЗадан с атрибутом loopСнабжён изображением-заставкой (poster)Предзагружен с preload равным auto

Практика

Какое значение атрибута kind для элемента track соответствует требованию WCAG 1.2.2, описывая диалоги и звуковые эффекты для глухих пользователей?

kind равен captionskind равен chapterskind равен metadatakind равен descriptions