<video> - HTML-елемент для відео

HTML-елемент <video> вбудовує медіа-програвач у документ для відтворення відео. Ви також можете використовувати <video> для аудіо, але елемент <audio> може бути більш доречним для аудіоконтенту.

Елемент <video> може містити один або декілька відеоджерел, представлених за допомогою атрибута src або дочірнього елемента <source>. Браузер вибере перший формат, який він підтримує.

Текст між тегами <video> та </video> відображається як запасний варіант для браузерів, які не підтримують цей елемент.

Тег <video> приклад використання в HTML
HTML
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Ваш браузер не підтримує тег video.
</video>

Атрибути

Цей тег може мати глобальні атрибути.

src

URL-адреса відеофайлу. Використання цього атрибута є альтернативою до елемента <source>.

autoplay

Булевий атрибут, який вказує, що відтворення почнеться автоматично. Більшість браузерів блокують цю функцію або вимагають, щоб відео було без звуку (з атрибутом muted).

controls

Якщо цей атрибут присутній, браузер відобразить стандартні елементи керування відтворенням (кнопка відтворення/паузи, регулятор гучності тощо).

loop

Булевий атрибут, який вказує, що відео буде відтворюватися по колу.

muted

Булевий атрибут, який вказує, що звук буде вимкнено за замовчуванням.

poster

URL-адреса зображення, яке буде відображатися до початку відтворення відео (заставка).

preload

Атрибут, який підказує браузеру, як краще завантажувати відеофайл. Можливі значення: none (не завантажувати), metadata (завантажити лише метадані), auto (дозволити браузеру вирішувати).

width

Ширина відеопрогравача в CSS-пікселях.

height

Висота відеопрогравача в CSS-пікселях.

playsinline

Булевий атрибут, який вказує, що відео повинно відтворюватися в межах елемента на мобільних пристроях, а не переходити в повноекранний режим.

crossorigin

Визначає, чи слід використовувати CORS при завантаженні відео. Це необхідно для доступу до відео з іншого домену через JavaScript (наприклад, для маніпуляцій з ним у <canvas>).

Технічне резюме

Категорія контенту

Потоковий контент, фразовий контент, вбудований контент, відчутний контент. Якщо має атрибут controls, то також інтерактивний контент.

Дозволений вміст

Якщо є атрибут src: нуль або більше елементів <track>, за якими слідує прозорий вміст, що не містить медіа-елементів (<audio> або <video>). В іншому випадку: один або більше елементів <source>, за якими слідує нуль або більше елементів <track>, за якими слідує прозорий вміст, що не містить медіа-елементів.

Пропуск тегів

Жоден, початковий та кінцевий теги є обов’язковими.

Дозволені батьківські елементи

Будь-який елемент, що приймає вбудований контент.

Роль ARIA

application, якщо має атрибут controls, інакше немає відповідної ролі.

DOM інтерфейс

HTMLVideoElement

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

Результат
<video controls width="280" loop>
    <source src="/static/video.mp4" type="video/mp4">
    Ваш браузер не підтримує вбудоване відео.
</video>

Підтримка браузерів

<video>
aspect_ratio_computed_from_attributes
autoplay
controls
controlslist
crossorigin
disablepictureinpicture
disableremoteplayback
height
loop
muted
playsinline
poster
preload
src
width

Останнє оновлення: