Що робить елемент <video>? Як вказати джерело відео в HTML?
Елемент <video> використовується для вбудовування відео прямо на веб-сторінку: без сторонніх плеєрів на кшталт YouTube або Flash.
Він дає змогу відтворювати, зупиняти, перемотувати і керувати відео засобами браузера.
1. Найпростіший приклад
html
<video src="video.mp4" controls></video>Що робить:
src="video.mp4": шлях до відеофайлу;controls: показує стандартні елементи керування (плей, пауза, гучність, прогрес-бар).
Результат: браузер вбудує відеоплеєр, який можна запускати прямо на сторінці.
2. Рекомендований (гнучкий) спосіб з <source>
Щоб підтримувати різні формати відео (MP4, WebM, Ogg), використовують вкладені теги <source>: браузер сам вибере підхожий:
html
<video controls width="640" height="360" poster="preview.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>Ваш браузер не підтримує відео.</p>
</video>Що тут:
<source>: шлях і тип файлу (typeдопомагає браузеру визначити формат);poster: картинка-прев'ю до початку відтворення;- всередині можна вказати текст-повідомлення, якщо браузер не підтримує
<video>.
3. Основні атрибути <video>
| Атрибут | Призначення | Приклад |
|---|---|---|
src | Шлях до відеофайлу (якщо не використовуються <source>) | src="clip.mp4" |
controls | Показує панель керування | controls |
autoplay | Запускає відео автоматично під час завантаження сторінки (часто блокується браузером) | autoplay |
muted | Вимикає звук типово (потрібно для автозапуску) | muted |
loop | Зациклює відео | loop |
poster | Зображення-заглушка до початку відтворення | poster="preview.jpg" |
preload | Керує попереднім завантаженням (none, metadata, auto) | preload="metadata" |
width / height | Розміри відеоплеєра | width="640" |
4. Поведінка preload
| Значення | Що робить |
|---|---|
none | Відео не завантажується, поки користувач не натисне play |
metadata | Завантажується лише інформація (тривалість, обкладинка) |
auto | Відео може завантажитися заздалегідь (якщо браузер вирішить, що це потрібно) |
5. Приклад з повним керуванням
html
<video width="600" controls autoplay muted loop poster="thumb.jpg">
<source src="intro.mp4" type="video/mp4">
<source src="intro.webm" type="video/webm">
Ваш браузер не підтримує відео.
</video>Поведінка:
- стартує автоматично;
- без звуку (щоб браузер не блокував автозапуск);
- повторюється по колу;
- перед стартом показує картинку
thumb.jpg.
6. Підтримувані формати
| Формат | MIME-тип | Підтримка |
|---|---|---|
.mp4 | video/mp4 | Усі браузери |
.webm | video/webm | Сучасні браузери |
.ogv | video/ogg | Firefox, Opera |
Порада: для кросбраузерності вказуй кілька <source>.
Підсумок:
| Властивість | Значення |
|---|---|
| Тег | <video> |
| Призначення | Відтворення відео прямо на сторінці |
| Джерело | Через src або вкладені <source> |
| Основні атрибути | controls, autoplay, muted, loop, poster |
| Переваги | Вбудований плеєр, без сторонніх бібліотек, підтримка різних форматів |
Простими словами:
<video> - це вбудований відеоплеєр HTML.
А джерело вказують через src або <source>,
щоб браузер знав, який файл відтворювати і в якому форматі.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.