Як вставити відео в HTML — це базове питання для тих, хто хоче додати на сторінку власний ролик, демо продукту або навчальний фрагмент без сторонніх плагінів. Найпростіше це робиться через тег video, але важливо правильно вибрати формат, атрибути та резервний варіант для браузерів.
Базовий спосіб вставки відео
Для локального або власного файла використовують елемент video. Він дає змогу відтворювати ролик прямо на сторінці та керувати його поведінкою через атрибути.
Типовий приклад виглядає так:
<video controls width=”640″>
<source src=”video.mp4″ type=”video/mp4″>
Ваш браузер не підтримує відео.
</video>
Тут controls показує стандартні кнопки відтворення, паузи та гучності, а width задає ширину плеєра. Текст усередині тега виводиться, якщо відео не вдалося запустити.
Які формати відео варто використовувати
Щоб відео працювало стабільно, краще підготувати кілька форматів. Найпоширеніший і найсумісніший варіант — MP4 з кодеком H.264. Для деяких сценаріїв також використовують WebM, який добре підходить для сучасних браузерів.
- MP4 — найкращий універсальний вибір;
- WebM — зручний для сучасних вебпроєктів;
- OGG — запасний варіант, але використовується рідше.
Якщо на сторінці критично важлива сумісність, додайте кілька source елементів. Браузер сам обере перший підтримуваний формат.
Корисні атрибути для зручного відтворення
Окрім controls, у тега video є ще кілька атрибутів, які допомагають налаштувати поведінку плеєра.
- autoplay — запускає відео автоматично;
- muted — вимикає звук, що часто потрібно для автозапуску;
- loop — повторює відео по колу;
- poster — показує зображення-заставку до старту;
- preload — підказує браузеру, як завантажувати файл.
На практиці autoplay краще використовувати обережно: багато браузерів блокують автоматичний запуск зі звуком. Якщо потрібен фоновий ролик, зазвичай додають muted і playsinline для мобільних пристроїв.
Що перевірити, якщо відео не відображається
Коли відео не запускається, проблема часто не в HTML, а у файлі або шляху до нього. Перевірте, чи правильно вказано src, чи існує файл на сервері та чи не містить шлях помилок у регістрі літер.
Також варто звернути увагу на такі речі:
- файл відео не пошкоджений;
- сервер віддає правильний MIME-тип;
- браузер підтримує формат і кодек;
- сторінка відкривається через HTTPS, якщо цього вимагає середовище.
Якщо потрібне відео з YouTube або іншого сервісу, тоді зазвичай використовують iframe, а не тег video. Це інший сценарій: HTML-відео підходить для власних файлів, а вбудовані плеєри — для зовнішніх платформ.
Практичний висновок
Щоб правильно зрозуміти, як вставити відео в HTML, достатньо запам’ятати три речі: використовуйте тег video, додавайте controls для зручності та обирайте сумісний формат, насамперед MP4. Якщо підготувати резервний текст і кілька джерел файлу, відео працюватиме значно надійніше на різних пристроях і в різних браузерах.
