Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить елемент <video>? Як вказати джерело відео в HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`<video>`** - це HTML-елемент, який дає змогу вбудувати і відтворювати відео прямо на сторінці без сторонніх плеєрів, а джерело задається атрибутом `src` або вкладеними тегами `<source>` для різних форматів. **Ключове:** керування відображенням і поведінкою відео налаштовується атрибутами `controls`, `autoplay`, `muted`, `loop` і `poster`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<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>`, щоб браузер знав, **який файл відтворювати і в якому форматі**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.