HTML с нуля: Добавляем аудио и видео на сайт — для начинающих. Урок №26

Создание интерактивного сайта невозможно представить без медиаконтента. Будь то фоновая музыка для создания атмосферы, подкаст или видеоролик о продукте — HTML5 предоставляет простые и мощные инструменты для внедрения этих элементов. В этой статье мы разберем основы HTML для работы с мультимедиа.

1. Вставка аудио: Тег <audio>

Для добавления звука в HTML5 используется тег <audio>. Он позволяет управлять воспроизведением, громкостью и визуальным оформлением плеера.

Базовый пример

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио.
</audio>

Разбор ключевых моментов:

• controls: Этот атрибут добавляет стандартные кнопки браузера (Play, пауза, громкость).

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

• Текст внутри тега: Он отобразится только в том случае, если браузер пользователя устарел и не поддерживает HTML5.

Как сделать фоновую музыку?

Если вы хотите, чтобы музыка играла сама при загрузке страницы, добавьте атрибут autoplay. Однако имейте в виду: современные браузеры блокируют автоматическое воспроизведение звука, если пользователь не взаимодействовал со страницей (например, не кликнул по ней).

<audio src="background-music.mp3" autoplay loop>
</audio>

• loop: заставляет музыку играть по кругу бесконечно.

2. Вставка видео: Тег <video>

Работа с видео в HTML для начинающих очень похожа на работу с аудио. Главное отличие — видео требует указания размеров (ширины и высоты).

Пример кода

<video width="640" height="360" controls poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

Полезные атрибуты:

• poster: Ссылка на изображение, которое будет показано до запуска видео (обложка).

• muted: Полезно для видео-фонов, чтобы ролик запускался автоматически без раздражающего звука.

3. Советы по оптимизации

Изучая HTML медиа, важно помнить о производительности сайта:

1. Выбор формата: Используйте .mp3 для аудио и .mp4 для видео — это стандарты, поддерживаемые всеми современными устройствами.

2. Вес файлов: Оптимизируйте медиа до загрузки. Не стоит вставлять аудиофайл весом 50 МБ, если его можно сжать до 3–5 МБ без потери качества.

Работа с тегами <audio> и <video> — это отличный способ оживить ваш проект. Теперь вы знаете, как добавить медиаконтент, настроить элементы управления и сделать ваш сайт более выразительным. Начните с малого: попробуйте создать простую страницу с любимым плейлистом или презентационным видео!