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> — це чудовий спосіб оживити ваш проєкт. Тепер ви знаєте, як додати медіаконтент, налаштувати елементи керування та зробити ваш сайт виразнішим. Почніть з малого: спробуйте створити просту сторінку з улюбленим плейлистом або презентаційним відео!