Тег <video>

Тег <video> (укр. – “відео”) в HTML використовується для вбудовування відеоконтенту на веб-сторінку. Цей елемент дозволяє відтворювати відеофайли локально або за допомогою зовнішнього джерела (URL), а також підтримує управління програванням відео за допомогою атрибутів або JavaScript API.

Тег <video> є зручним рішенням для додавання мультимедійного контенту на сучасні веб-сторінки завдяки своїй гнучкості та широкій підтримці браузерами.

Атрибути

Специфічні атрибути

• src — вказує шлях до відеофайлу. Наприклад:

<video src="video.mp4" controls></video>

• controls — додає елементи управління відео (відтворення, пауза, гучність, повноекранний режим тощо). Наприклад:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

• autoplay — автоматично запускає відтворення відео при завантаженні сторінки. Наприклад:

<video autoplay>
    <source src="video.mp4" type="video/mp4">
</video>

• loop — запускає відео заново після завершення. Наприклад:

<video loop>
    <source src="video.mp4" type="video/mp4">
</video>

• muted — вимикає звук відео за замовчуванням. Наприклад:

<video muted>
    <source src="video.mp4" type="video/mp4">
</video>

• poster — вказує зображення, яке відображатиметься до запуску відео. Наприклад:

<video poster="poster.jpg" controls>
    <source src="video.mp4" type="video/mp4">
</video>

• preload — вказує, як браузер повинен завантажувати відео. Можливі значення:
  • auto — завантажувати відео повністю.
  • metadata — завантажити тільки метадані відео.
  • none — не завантажувати відео до відтворення.

Наприклад:

<video preload="metadata">
    <source src="video.mp4" type="video/mp4">
</video>

Глобальні атрибути

Тег <video> підтримує всі глобальні атрибути HTML, включаючи:

• id — унікальний ідентифікатор для елемента. Наприклад:

<video id="main-video" controls>
    <source src="video.mp4" type="video/mp4">
</video>

• class — задає клас для застосування стилів через CSS. Наприклад:

<video class="responsive-video" controls>
    <source src="video.mp4" type="video/mp4">
</video>

• style — дозволяє додавати інлайн-стилі до елемента. Наприклад:

<video style="border: 2px solid #000;" controls>
    <source src="video.mp4" type="video/mp4">
</video>

• title — задає текст підказки для елемента, який відображається при наведенні миші. Наприклад:

<video title="Наведіть, щоб побачити опис" controls>
    <source src="video.mp4" type="video/mp4">
</video>

Приклад використання

<video controls autoplay loop muted poster="poster.jpg" width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
    Ваш браузер не підтримує відео.
</video>

Додаткові моменти

• Різні браузери підтримують різні формати відео. Основні формати:
  • MP4 (H.264 + AAC) — найпоширеніший формат.
  • WebM (VP8/VP9 + Vorbis) — підтримується у сучасних браузерах.
  • Ogg/Theora — менш популярний, але відкритий формат.
• Для користувачів з обмеженими можливостями додавайте текстову альтернативу або субтитри. Субтитри додаються через тег <track>:

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="uk" label="Українська">
</video>

• Тег <video> підтримує управління відео через JavaScript. Наприклад, запуск, пауза та отримання стану відео.