HTML Мультимедиа

Мультимедиа — это практически всё, что можно услышать или увидеть (например, звук, музыка, изображения, записи, видео, фильмы, анимации и т. д.). Оно существует в разных форматах. Веб-страницы могут содержать мультимедийные элементы различных форматов и типов.

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

Теги мультимедиа

HTML позволяет добавлять на сайт различные мультимедийные файлы с помощью специальных тегов. К ним относятся:

• <audio> — для воспроизведения аудиофайла на веб-странице,
• <video> — для воспроизведения видеофайла на веб-странице,
• <source> — для предложения нескольких медиафайлов, чтобы браузер выбрал поддерживаемый,
• <track> — для добавления субтитров или титров к элементу <video> или <audio>,
• <embed> — для встраивания внешнего контента (чаще всего PDF) на веб-страницу,
• <object> — для встраивания внешних ресурсов — в основном устаревший тег на сегодняшний день,
• <iframe> — для встраивания других веб-страниц.

Вот простой пример с атрибутом controls и тегами <source>:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Текст между открывающим и закрывающим тегами («Your browser does not support…») — это резервный контент. Он отображается только в том случае, если браузер не может воспроизвести элемент вообще.

Зачем использовать несколько элементов <source>

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

Видео, работающее во всех браузерах, обычно предлагает и MP4 (максимальная совместимость, включая Safari), и WebM (свободный, открытый, хорошо поддерживаемый в Chrome и Firefox):

<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video element.
</video>

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

Аудиоэлемент следует той же схеме. MP3 воспроизводится везде; Ogg — бесплатная альтернатива, поддерживаемая Chrome и Firefox:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Субтитры и доступность

Используйте элемент <track>, чтобы добавить субтитры или титры к видео. Субтитры делают контент доступным для глухих и слабослышащих зрителей, а также помогают тем, кто смотрит с выключенным звуком. Дорожка kind="captions" указывает на файл WebVTT (.vtt):

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
  Your browser does not support the video element.
</video>

Автовоспроизведение, постер и предзагрузка

Несколько атрибутов <video> заслуживают отдельного внимания:

• autoplay — запускает воспроизведение автоматически. Современные браузеры блокируют автовоспроизведение со звуком, поэтому клип будет воспроизводиться автоматически только при наличии также атрибута muted: <video autoplay muted>.
• poster — изображение, отображаемое до начала воспроизведения видео (кадр-заглушка).
• preload — подсказывает, сколько данных буферизировать заранее: none, metadata (только длительность и размеры) или auto (браузер может загрузить весь файл).

Встраивание другого контента: <object> и <embed>

Два более старых тега позволяют встраивать внешние ресурсы. Сегодня их роль ограничена:

• <object> был универсальным контейнером для плагинов и внешних файлов. Сегодня это в основном устаревший тег — для обычного видео и аудио следует использовать <video> и <audio>.
• <embed> тоже встраивает внешний контент, но на современных страницах его в основном используют для отображения PDF.

<embed src="document.pdf" type="application/pdf" width="600" height="400">

Форматы мультимедиа

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

Распространённые расширения мультимедиа включают .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv и .avi. (Вы всё ещё можете встретить Flash-файлы .swf, но Flash устарел — он был удалён из всех браузеров в 2020 году.)

Аудиоформаты

Новейшим форматом для сжатой записи музыки является MP3. Этот термин стал синонимом цифровой музыки.

MP3 — хороший выбор, если ваш сайт посвящён записанной музыке.

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

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

Аудио и видео нативно воспроизводятся всеми современными браузерами — сторонние плагины не требуются. Поддержка форматов неодинакова в разных браузерах, именно поэтому рекомендуется предлагать несколько элементов <source>:

• Аудио — MP3 и AAC (в .mp4) работают во всех основных браузерах, включая Safari. Ogg/Vorbis работает в Chrome и Firefox, но не в Safari.
• Видео — MP4 (H.264) работает везде, включая Safari. WebM и Ogg/Theora работают в Chrome и Firefox.

Безопасная и широко используемая комбинация — MP4 + WebM для видео и MP3 + Ogg для аудио.

Практика