🎵 Мультимедіа на вебсторінці: звук, відео та YouTube
Уявіть сайт-подкаст, який не грає, або онлайн-кінотеатр, де замість відео — лише текст. Сумно, правда? Сучасний Інтернет неможливо уявити без музики, відеороликів та анімації. Усе це називається мультимедіа.
Мультимедіа — це будь-який контент, який можна почути або побачити: зображення, музика, звуки, відео, анімація. Раніше, щоб відтворити аудіо чи відео на сайті, доводилося встановлювати спеціальні плагіни (наприклад, Flash). Але ці часи минули. Сьогодні завдяки стандарту HTML5 ми можемо додавати звук і відео на сторінку дуже просто — за допомогою вбудованих тегів.
💡 Цікавий факт: Перші браузери взагалі не підтримували мультимедіа — вони показували лише текст. Сучасні браузери «розуміють» десятки форматів, але не всі однаково добре, тому важливо знати, який формат обрати.
📌 Звідки матеріал: Цей урок базується на офіційній документації W3Schools українською. Адаптований матеріал в якому є детальні пояснення, покрокові розбори та живі приклади. Ознайомитися з оригіналом можна за посиланнями:
📑 Що ми розберемо в цьому уроці?
- Аудіо: як додати музику на сайт, які формати використовувати та як працюють атрибути
autoplay,loopтаmuted. - Відео: як вставити відеоролик, налаштувати його розмір та зробити так, щоб він грав автоматично.
- YouTube: як вбудувати відео з YouTube на свою сторінку за допомогою тегу
<iframe>та керувати його параметрами.
❓ Поміркуйте: пригадайте останній сайт, де ви бачили відео або слухали музику. Як ви думаєте, чому розробники використовують мультимедіа? Чи робить це сайт цікавішим?
🌐 Загальна теорія: як браузери розуміють мультимедіа
Перш ніж ми почнемо вставляти аудіо та відео, давайте розберемося, як взагалі працює мультимедіа в Інтернеті.
🎞️ Що таке формати і чому їх так багато?
Як і у випадку з картинками (де є JPG, PNG, SVG), для відео та аудіо теж існують різні формати. Формат — це «мова», якою збережено файл.
Різні формати створювалися для різних цілей: одні краще стискають файли (щоб сайт завантажувався швидше), інші дають кращу якість, треті є безкоштовними і відкритими.
Ось основні формати, з якими ми будемо працювати:
- Для відео: MP4 (найпопулярніший), WebM, Ogg.
- Для аудіо: MP3 (найпопулярніший), WAV, Ogg.
🚦 Проблема: браузери не все розуміють
Уявіть, що ви записали відео у форматі Ogg. Ви завантажуєте його на сайт, відкриваєте в браузері Chrome — все ідеально. Але ваш друг відкриває ваш сайт у Safari на iPhone — і відео не працює.
Чому так? Тому що різні браузери підтримують різні формати. Це як з мовами: хтось знає англійську, хтось — німецьку, а хтось — обидві.
Щоб вирішити цю проблему, HTML5 (сучасний стандарт вебу) дозволяє нам вказувати декілька форматів для одного файлу. Браузер автоматично обирає той, який він розуміє.
📜 Трохи історії: як було раніше (і чому це погано)
До появи HTML5 (приблизно до 2014 року) для відтворення відео та аудіо використовувалися спеціальні плагіни — програми, які треба було встановлювати в браузер. Найвідоміший з них — Adobe Flash.
Для цього використовувалися теги <object> та <embed>. Але вони мали багато проблем: сайт гальмував, плагіни постійно ламалися, а на телефонах Flash взагалі не працював.
Сьогодні ці теги вважаються застарілими. Сучасний стандарт HTML5 пропонує прості та зручні теги <audio> для звуку та <video> для відео, які працюють у браузері за замовчуванням, без жодних плагінів.
🏆 Головний висновок: вам не треба встановлювати плагіни чи писати складний код із <object>. Достатньо знати теги <audio> та <video> і вказувати декілька форматів для надійності.
🎨 Приклад (як це виглядає)
Коли ми пишемо код для відео чи аудіо, ми можемо дати браузеру вибір із кількох джерел. Виглядає це приблизно так:
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Ваш браузер не підтримує відео.
</video>
Браузер читає цей список і каже: «Ага, я розумію MP4! Візьму його». А якщо не розуміє MP4, то спробує OGG. Якщо не розуміє нічого — покаже текст-заглушку.
🎧 Аудіо на вебсторінці: як додати звук
Пам’ятаєте, як ми додавали картинки? Ми писали тег <img>, а всередині вказували src (шлях до файлу). З аудіо все працює точно так само, тільки використовується інший тег.
🎵 Знайомство з тегом <audio>
Щоб додати музику на сайт, ми використовуємо тег <audio>. Він каже браузеру: «Гей, тут буде аудіофайл!».
Але як браузер зрозуміє, який саме файл треба відтворити? Для цього ми використовуємо атрибут src (від англійського source — джерело). Це обов’язковий атрибут, без нього нічого не працюватиме.
Але якщо ви вставите цей код на сторінку, ви нічого не побачите і не почуєте. Чому? Бо браузер завантажив пісню, але не знає, як дати вам нею керувати.
🎛️ Атрибут controls — пульт керування
Щоб на сторінці з’явився плеєр із кнопками «Play», «Pause» та повзунком гучності, треба додати атрибут controls.
Тепер користувач побачить плеєр і зможе самостійно увімкнути музику.
✨ Атрибути-невидимки: autoplay, loop, muted
Окрім кнопок, ми можемо налаштувати поведінку плеєра. Ось три «чарівні» атрибути:
autoplay— музика почнеться автоматично, щойно сторінка завантажиться.loop— трек зациклиться і гратиме по колу, поки користувач його не зупинить.muted— звук за замовчуванням вимкнено.
⚠️ Секрет сучасних браузерів: Браузери (Chrome, Safari) дуже не люблять, коли сайти починають грати музику без дозволу. Тому вони блокують autoplay, якщо увімкнено звук.
Щоб музика заграла сама, треба обов’язково додати autoplay разом із muted. Тоді плеєр запуститься автоматично, але без звуку (користувач сам зможе його увімкнути).
📦 Формати аудіо: що використовувати?
Як і картинки, аудіо буває різних форматів. Але тут є велика проблема: різні браузери підтримують різні формати. Ось актуальна ситуація на 2026 рік:
| Браузер | MP3 | WAV | OGG |
|---|---|---|---|
| Chrome | ✅ Так | ✅ Так | ✅ Так |
| Firefox | ✅ Так | ✅ Так | ✅ Так |
| Safari | ✅ Так | ✅ Так | ❌ Ні |
| Edge | ✅ Так | ✅ Так | ✅ Так |
Головне правило: MP3 працює абсолютно скрізь. Це найбезпечніший вибір для сайту.
А якщо ви хочете додати формат OGG (він якісніший і менший за розміром), то пам’ятайте: Safari (браузер Apple) його не програє, як і старі версії Edge. Тому покладатися лише на OGG не можна.
🔄 Тег <source>: страховка для всіх
Щоб ваше аудіо почули користувачі всіх браузерів, використовуйте тег <source>. Він дозволяє додати декілька джерел (наприклад, різні формати), і браузер автоматично обере той, який підтримує.
🚨 Дуже важливе правило! Подивіться уважно на різницю:
- Якщо файл лише ОДИН: ми пишемо атрибут
srcпрямо в тегу<audio>.<audio src="music.mp3" controls></audio> - Якщо файлів ДЕКІЛЬКА: тег
<audio>залишається порожнім (безsrc!), а шляхи до файлів пишуться в тегах<source>всередині.<audio controls>
<source src="music.ogg">
<source src="music.mp3">
</audio>
Ось повний приклад із тегом <source> (спочатку OGG, потім MP3 як резерв):
<!– Браузер спробує OGG першим. Якщо Safari його не зрозуміє, він перейде до MP3 –>
<source src=”music.ogg” type=”audio/ogg”>
<source src=”music.mp3″ type=”audio/mpeg”>
Ваш браузер не підтримує аудіо.
</audio>
Чому тут OGG стоїть першим? Тому що OGG часто має кращу якість при меншому розмірі. Браузер, який його підтримує (Chrome, Firefox), візьме його. А Safari, який не підтримує OGG, «пропустить» його і візьме MP3. Це і є принцип «страховки».
🎨 Живі приклади
Приклад 1. Звичайний плеєр
Ось код, який ми використовуємо:
<source src=”https://www.w3schools.com/html/horse.ogg” type=”audio/ogg”>
<source src=”https://www.w3schools.com/html/horse.mp3″ type=”audio/mpeg”>
Ваш браузер не підтримує аудіо.
</audio>
А ось як він виглядає на сторінці. Натисніть «Play», щоб почути звук:
Приклад 2. Магія autoplay + muted + loop
А тепер додамо чарівні атрибути. Ось код:
<source src=”https://www.w3schools.com/html/horse.ogg” type=”audio/ogg”>
<source src=”https://www.w3schools.com/html/horse.mp3″ type=”audio/mpeg”>
Ваш браузер не підтримує аудіо.
</audio>
Цей плеєр запуститься сам, без звуку, і гратиме по колу. Зверніть увагу, що кнопка Play вже натиснута, а звук вимкнено:
🎬 Відео на вебсторінці
Ми навчилися додавати звук. Тепер давайте оживимо наш сайт відео! Для цього використовується тег <video>. Він працює майже так само, як і <audio>, але має кілька важливих особливостей.
📺 Базовий синтаксис та атрибут controls
Як і у випадку з аудіо, нам потрібно вказати шлях до файлу (атрибут src) та додати панель керування (controls).
Без атрибута controls ви не зможете запустити відео, тому що не буде кнопки «Play».
📐 Атрибути width та height: чому це важливо?
На відміну від аудіо, відео має розмір. Якщо ви не вкажете ширину (width) та висоту (height) у пікселях, браузер може відображати відео неправильно, і сторінка буде «мерехтіти».
Тому рекомендується завжди вказувати ці атрибути:
🤔 Що буде, якщо забути controls? (Життєві приклади)
Атрибут controls здається дрібницею, але він кардинально змінює те, як користувач взаємодіє з відео. Давайте подивимося на два випадки, коли ми його не вказуємо.
Випадок 1. Просто відео без кнопок (ефект «зламаної картинки»)
Уявіть, що ви написали код <video src="movie.mp4"></video> (без controls). Що побачить користувач? Просто чорний квадрат (або перший кадр відео). Він не зможе його запустити. Відео виглядатиме як звичайна, але «мертва» картинка.
💡 Де це застосовують: Майже ніде. Це вважається помилкою розробника. Але корисно знати, що controls — це не просто кнопки, це «ключ» до відео.
Випадок 2. «Жива картинка», яку неможливо зупинити (заміна GIF)
А що якщо ми приберемо controls, але додамо autoplay, muted та loop?
Код: <video src="movie.mp4" autoplay muted loop></video>
Користувач зайде на сайт, і відео автоматично почне грати без звуку по колу. І найцікавіше — він не зможе його зупинити, бо ми прибрали кнопки! Це виглядає як сучасна анімація або «жива» картинка на фоні.
💡 Де це застосовують: Дуже часто! Раніше на сайтах для таких «живих» картинок використовували важкі GIF-файли (які сильно гальмували сторінку). Сьогодні розумні розробники замінюють їх на відео (формат MP4/WebM) без кнопок керування. Воно важить менше, виглядає якісніше і створює ефект «анімації», яка ніколи не зупиняється.
📦 Формати відео
Як і з аудіо, різні браузери підтримують різні формати відео. Ось три основні:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Chrome | ✅ Так | ✅ Так | ✅ Так |
| Firefox | ✅ Так | ✅ Так | ✅ Так |
| Safari | ✅ Так | ❌ Ні | ❌ Ні |
| Edge | ✅ Так | ✅ Так | ✅ Так |
Головне правило: MP4 — це найбезпечніший і найпопулярніший формат для вебу. Він працює скрізь.
🔄 Тег <source>: страховка для всіх
Якщо ви хочете використовувати інші формати (наприклад, WebM, який краще стискає), використовуйте тег <source> всередині <video>. Це дасть браузеру вибір.
Приклад: спочатку WebM, потім MP4 (як резерв).
<source src=”movie.webm” type=”video/webm”>
<source src=”movie.mp4″ type=”video/mp4″>
Ваш браузер не підтримує відео.
</video>
Браузер, який підтримує WebM (Chrome, Firefox), візьме його. Safari, який не підтримує WebM, «пропустить» його і візьме MP4.
🎨 Живі приклади
Приклад 1. Звичайний відеоплеєр
Ось код:
<source src=”https://www.w3schools.com/html/mov_bbb.mp4″ type=”video/mp4″>
<source src=”https://www.w3schools.com/html/mov_bbb.ogg” type=”video/ogg”>
Ваш браузер не підтримує відео.
</video>
А ось як він виглядає (натисніть «Play»):
Приклад 2. Автозапуск без звуку (із зацикленням)
Ось код:
<source src=”https://www.w3schools.com/html/mov_bbb.mp4″ type=”video/mp4″>
<source src=”https://www.w3schools.com/html/mov_bbb.ogg” type=”video/ogg”>
Ваш браузер не підтримує відео.
</video>
Це відео запуститься автоматично, без звуку, і буде повторюватися по колу. Але ви можете його зупинити, бо є controls:
Приклад 3. «Жива картинка» (без кнопок, неможливо зупинити)
Ось код:
<source src=”https://www.w3schools.com/html/mov_bbb.mp4″ type=”video/mp4″>
<source src=”https://www.w3schools.com/html/mov_bbb.ogg” type=”video/ogg”>
</video>
Зверніть увагу: тут немає жодних кнопок. Відео просто грає по колу, як анімована картинка. Ви не можете його зупинити або перемотати:
📺 Вбудовування відео з YouTube
Ми навчилися додавати відео за допомогою тегу <video>. Але є одна проблема: якщо відео велике, воно може важити сотні мегабайт. Завантажувати такий файл на свій сайт — це довго і дорого.
Саме тому розробники часто використовують YouTube. Відео зберігається на серверах Google, а на вашому сайті воно просто «вбудовується» за допомогою тегу <iframe> (від англійського inline frame — вбудована рамка).
🛠️ Як отримати код для свого відео?
Вам не потрібно вигадувати цей код вручну. YouTube сам його генерує:
- Відкрийте потрібне відео на YouTube.
- Під відео натисніть кнопку «Поділитися» (Share).
- У меню, що відкрилося, оберіть «Вставити» (Embed).
- Скопіюйте запропонований код і вставте його на свою сторінку.
Ось як виглядає базовий код вбудовування:
🎨 Живий приклад
Ось як виглядає вбудоване відео з YouTube на сторінці (ви можете натиснути «Play», щоб переглянути його):
Як бачите, все дуже просто! Головне — не забувати, що параметри width та height задають розмір «віконця» для відео.
✅ Підсумок та Шпаргалка
Ми розібрали, як зробити сайт живим за допомогою мультимедіа. Ось головні думки уроку:
- Мультимедіа робить сайт цікавішим. Сучасні браузери підтримують аудіо та відео без встановлення плагінів.
- Аудіо додається тегом
<audio>, а відео — тегом<video>. Головний атрибут для обох —controls(панель керування). - Автозапуск (
autoplay) у сучасних браузерах блокується, якщо увімкнено звук. Тому його завжди використовують разом ізmuted. - Формати: для аудіо найкраще брати MP3, для відео — MP4. Вони працюють у всіх браузерах.
- YouTube дозволяє вбудувати відео без завантаження файлів на сайт. Для цього використовується тег
<iframe>.
📋 Шпаргалка: усе про мультимедіа
Збережіть цю таблицю. Вона допоможе вам швидко згадати синтаксис.
| Що додаємо | Тег | Головні атрибути | Приклад |
|---|---|---|---|
| Аудіо | <audio> | controls, autoplay, muted, loop | <audio src="music.mp3" controls></audio> |
| Відео | <video> | controls, width, height, autoplay | <video src="movie.mp4" width="400" controls></video> |
| YouTube | <iframe> | width, height, src (з посиланням) | <iframe src="https://www.youtube.com/embed/..."></iframe> |
Шаблони коду для копіювання:
1. Аудіо з кількома форматами (страховка):
<source src=”music.ogg” type=”audio/ogg”>
<source src=”music.mp3″ type=”audio/mpeg”>
Ваш браузер не підтримує аудіо.
</audio>
2. Відео з автозапуском та зацикленням (без звуку):
<source src=”movie.mp4″ type=”video/mp4″>
</video>
3. Вбудовування відео з YouTube: