<video> – елемент вбудованого відео

Елемент HTML <video> вставляє в документ мультимедійний програвач, що підтримує відтворення відео. Також <video> можна використовувати для аудіо, однак елемент <audio> може запропонувати більш відповідний для цього користувацький досвід.

Спробуйте його в дії

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

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

Атрибути

Подібно до всіх решти елементів HTML, цей елемент підтримує глобальні атрибути.

autoplay

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

[!NOTE] Сучасні браузери блокують автоматичне відтворення аудіо (та відео з незаглушеною аудіодоріжкою), адже сайти, що автоматично відтворюють аудіо, можуть бути неприємними для користувачів. Дивіться додаткову інформацію про те, як правильно користуватися автоматичним відтворенням, у нашому посібнику з автоматичного відтворення

Щоб вимкнути автоматичне відтворення відео, autoplay="false" не спрацює; відео автоматично заграє, якщо цей атрибут присутній на тегу <video> взагалі. Щоб прибрати автоматичне відтворення, цей атрибут повинен бути прибраний взагалі.

controls

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

controlslist

Атрибут controlslist (англ.), бувши вказаним, допомагає браузеру обрати, які контрольні елементи показати на елементі video, коли браузер показує власний набір контрольних елементів (тобто коли вказаний атрибут controls).

Дозволені значення: nodownload, nofullscreen і noremoteplayback.

Використовуйте атрибут disablepictureinpicture при потребі вимкнути режим картинки-в-картинці (і контрольні елементи).

crossorigin

Цей перелічений атрибут вказує, чи треба використовувати для отримання відповідного відео CORS. Ресурси, що дозволяють CORS, можуть бути перевикористані в елементі <canvas>, не бувши ославленими. Дозволеними значеннями є:

anonymous

Надсилає запит на інше походження без авторизації. Інакше кажучи, надсилає заголовок HTTP Origin: без реп'яшка, сертифіката X.509 чи виконання базової автентифікації HTTP. Якщо сервер не надає походженню сайту даних авторизації (не встановлюючи заголовок HTTP Access-Control-Allow-Origin:), то ресурс буде ославлений, а його використання – обмежено.

use-credentials

Посилає запит на інше походження з авторизацією. Інакше кажучи, надсилає заголовок HTTP Origin: з реп'яшком, сертифікатом чи виконанням базової автентифікації HTTP. Якщо сервер не надає походженню сайту даних авторизації (за допомогою заголовка HTTP Access-Control-Allow-Credentials:), то ресурс буде ославлений, а його використання – обмежено.

Коли цього атрибута немає, ресурс отримується без запиту CORS (тобто без надсилання заголовка HTTP Origin:), запобігаючи його неославленому використанню в елементах <canvas>. Якщо значення недійсне, то це працює так, ніби використано ключове слово anonymous. Дивіться атрибути налаштувань CORS для отримання додаткової інформації.

disablepictureinpicture

Запобігає тому, щоб браузер пропонував контекстне меню картинки-в-картинці чи, у певних випадках, автоматично запитував картинку-в-картинці.

disableremoteplayback

Булів атрибут, що використовується для вимкнення можливості віддаленого відтворення на пристроях, що під'єднані за допомогою провідних (HDMI, DVI тощо) та безпровідних технологій (Miracast, Chromecast, DLNA, AirPlay тощо).

У Safari як запасний варіант можна використати x-webkit-airplay="deny" (англ.).

height

Висота області відтворення відео, задана в пікселях CSS (англ.) (приймаються лише абсолютні значення; жодних відсотків (англ.)).

loop

Булів атрибут; коли вказаний, браузер автоматично перемотуватиме на початок після досягнення кінця відео.

muted

Булів атрибут, що вказує усталене налаштування заглушення для аудіо, включеного у відео. Якщо встановлений, то аудіо спершу буде заглушене. Усталене значення – false, тому аудіо буде відтворено разом з відтворенням відео.

playsinline

Булів атрибут, що вказує, що відео повинно бути відтворено "вбудованим", тобто в межах області відтворення елемента. Зверніть увагу, що відсутність цього атрибута не означає, що відео завжди буде відтворено в повноекранному режимі.

poster

URL зображення, що буде показано, поки відео стягується. Якщо цей атрибут не вказаний, то нічого не буде показано, поки не буде доступний перший кадр, а потім – як кадр анонсу буде показаний перший кадр.

preload

Цей перелічений атрибут повинен надавати пораду браузерові про те, що, як вважає автор, приведе до найкращого користувацького досвіду щодо того, який вміст завантажений до відтворення відео. Може мати одне з наступних значень:

• none: Вказує, що відео не повинно бути завантажено попередньо.
• metadata: Вказує, що попередньо отримуються лише метадані (наприклад, тривалість).
• auto: Вказує, що може бути стягнуто все відео, навіть якщо не очікується, що користувач ним скористається.
• порожній рядок: Синонім значення auto.

Усталене значення відрізняється в різних браузерах. Специфікація радить, щоб це було metadata.

[!NOTE]

• Атрибут autoplay має пріоритет над preload. Якщо вказаний autoplay, то, очевидно, браузер буде змушений почати завантажувати відео, аби його відтворити.
• Специфікація не змушує браузер виконувати вказівку цього атрибута; це радше порада.

src

URL відео, що має бути вбудоване. Цей атрибут необов'язковий; натомість для вказівки, яке відео вбудовувати, можна використати елемент <source> всередині блока <video>.

width

Ширина області відтворення відео, задана в пікселях CSS (англ.) (приймаються лише абсолютні значення; жодних відсотків (англ.)).

Події

Примітки щодо використання

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

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Ваш браузер не підтримує відео HTML. Ось натомість
    <a href="myVideo.mp4" download="myVideo.mp4">посилання на відео</a>.
  </p>
</video>

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

Інші примітки щодо використання:

• Якщо не вказати атрибута controls, то відео не включатиме усталених контрольних елементів браузера; можна створити власні контрольні елементи за допомогою JavaScript й API HTMLMediaElement. Дивіться Створення кросбраузерного програвача відео для отримання подробиць.
• Щоб дати змогу контролювати відео (та аудіо) вміст з високою точністю, HTMLMediaElement викидає багато різних подій. На додачу до надання контрольованості, ці події дають змогу контролювати прогрес як стягнення, так і відтворення мультимедійного об'єкта, а також стан та позицію відтворення.
• Для прилаштування позиціонування відео всередині рамок елемента можна використовувати властивість object-position, а для контролю того, як розмір відео припасовується для вміщення в рамки – object-fit.
• Для демонстрації разом з відео субтитрів можна використати трохи JavaScript разом з елементом <track> і форматом WebVTT. Дивіться Додавання до відео HTML підписів та субтитрів для отримання додаткової інформації.
• За допомогою елемента <video> можна відтворювати аудіо. Це може бути корисним, якщо, наприклад, треба відтворювати аудіо вкупі з розшифровкою WebVTT, оскільки елемент <audio> не дозволяє субтитрів WebVTT.
• Щоб перевірити запасний вміст у браузерах, що підтримують елемент, можна замінити <video> вигаданим елементом, наприклад, <notavideo>.

Добрим загальним джерелом інформації про використання HTML <video> є підручник для початківців Відео й аудіо вміст.

Стилізація за допомогою CSS

Елемент <video> є заміщеним елементом: його значення display усталено дорівнює inline, але його усталені ширина й висота в області перегляду визначаються відео, що вбудовується.

Особливих міркувань щодо стилізації <video> немає; загальною стратегією є надати йому властивість display зі значенням block, щоб йому було легше задати розташування, розмір тощо, а потім надати стилізацію та інформацію про компонування, як необхідно. Певні методи стилізації наведено в основах стилізації програвача відео.

Додавання титрів та інших хронометрованих текстових доріжок

Хронометровані текстові доріжки з титрами, закритими субтитрами, заголовками розділів і так далі можна декларативно додавати, вкладаючи їх в елемент <track>.

Доріжки задаються у Форматі файлів текстових доріжок вебвідео (WebVTT) (файлах .vtt).

Наприклад, HTML нижче додає файл "captions.vtt", що вживатиметься для накладання закритих субтитрів на відео, якщо субтитрування буде ввімкнено користувачем.

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

Хронометровані текстові доріжки також можна додавати програмно, користуючись API WebVTT.

Відстеження додавання й вилучення доріжок

Додавання й видалення доріжок з елемента <video> можна відстежувати за допомогою подій addtrack і removetrack. Втім, ці події не надсилаються до самого елемента <video>.

Натомість вони надсилаються до об'єкта списку доріжок всередині HTMLMediaElement елемента <video>, що відповідає типу доріжки, котра була додана:

HTMLMediaElement.audioTracks

AudioTrackList, що містить усі аудіодоріжки мультимедійного елемента. Додайте до цього об'єкта слухач addtrack, щоб отримати сповіщення, коли до елемента будуть додані нові аудіодоріжки.

HTMLMediaElement.videoTracks

A VideoTrackList, що вміщає усі відеодоріжки медійного елемента. Додайте до цього об'єкта слухач addtrack, щоб отримати сповіщення, коли до елемента будуть додані нові відеодоріжки.

HTMLMediaElement.textTracks

TextTrackList, що вміщає усі текстові доріжки медійного елемента (які використовуються як титри, закриті субтитри й так далі). Додайте до цього об'єкта слухач addtrack, щоб отримати сповіщення, коли до елемента будуть додані текстові доріжки.

Наприклад, для відстеження додавання чи вилучення з елемента <video> доріжок аудіо можна використати код типу наступного:

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

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

Також для слухання подій addtrack і removetrack можна використати addEventListener().

Серверна підтримка відео

Якщо тип MIME відео не був коректно заданий на сервері, то відео може не бути показане чи показати сіру рамку з X (якщо JavaScript увімкнений).

Якщо для подачі відео WebM використовується Apache Web Server, то цю проблему можна вирішити шляхом додавання до типу MIME video/webm розширень типу файлу відео (найпоширеніше розширення файлу WebM – .webm). Щоб це зробити, відредагуйте файл mime.types в /etc/apache або використайте директиву конфігурації AddType в httpd.conf.

AddType video/webm .webm

Вебхостинг може надавати зручний інтерфейс конфігурування змін для нових технологій, поки природним чином не станеться глобальне оновлення.

Доступність

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

Варто зазначити, що хоч і можна субтитрувати суто звуковий вміст, це можливо лише при відтворенні аудіо в елементі <video>, оскільки область відео в елементі використовується для подачі субтитрів. Це один з особливих сценаріїв, коли корисно відтворювати аудіо в елементі відео.

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

На додачу до усних розмов, субтитри та стенограми також повинні містити позначення музики та звукових ефектів, що передають важливу інформацію. Серед такої інформації – емоції та тон:

14
00:03:14 --> 00:03:18
[Драматична рокмузика]
15
00:03:19 --> 00:03:21
[шепотом] Що це там, удалині?
16
00:03:22 --> 00:03:24
Це… це…
16 00:03:25 --> 00:03:32
[Гучне гуркотіння]
[Брязкіт посуду]

Субтитри не повинні затуляти суть відео. Їх можна позиціонувати за допомогою налаштування cue VTT align.

• Формат текстових доріжок вебвідео (WebVTT)
• WebAIM – Субтитри, стенограми та описи аудіо
• MDN Розуміння WCAG, пояснення Настанови 1.2
• Розуміння критерію успіху 1.2.1 | W3C Розуміння WCAG 2.0
• Розуміння критерію успіху 1.2.2 | W3C Розуміння WCAG 2.0

Приклади

Одне джерело

Цей приклад, бувши активованим, відтворює відео, надаючи користувачеві усталені елементи контролю відео для контролю відтворення.

HTML

<!-- Простий приклад відео -->
<!-- 'Big Buck Bunny' ліцензовано Blender foundation під CC 3.0. Розміщено на archive.org -->
<!-- Анонс із peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Вибачте, ваш браузер не підтримує вбудовані відео, але не турбуйтесь, ви
  можете
  <a href="https://archive.org/details/BigBuckBunny_124">його стягнути</a> і
  переглянути в улюбленому програвачі відео!
</video>

Результат

Поки відео починає відтворення, на його місці виводиться зображення, надане атрибутом poster. Якщо браузер не підтримує відтворення відео – він виводить запасний текст.

Декілька джерел

Цей приклад заснований на попередньому, але пропонує три різні джерела мультимедійних даних; це дає змогу переглядати відео незалежно від того, які кодеки відео підтримує браузер

HTML

<!-- Використання декількох джерел як запасних варіантів для тега video -->
<!-- 'Elephants Dream' від Orange Open Movie Project Studio, ліцензовано під CC-3.0, розміщено на archive.org -->
<!-- Анонс розміщено на Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Вибачте, Ваш браузер не підтримує вбудованих відео, але не переймайтесь: Ви
  можете
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    стягнути файл MP4
  </a>
  і переглянути його в своєму улюбленому програвачі відео!
</video>

Результат

Спершу виконується спроба відтворити AVI. Якщо це не вдається, то MP4. Запасне повідомлення виводиться, якщо елемент video не підтримується, але не тоді, коли всі джерела не спрацьовують.

Певні типи мультимедійних файлів дають змогу надати більш конкретну інформацію за допомогою параметра codecs як частини рядка типу файлу. Відносно простий приклад – video/webm; codecs="vp8, vorbis"; він вказує, що файл – це відео WebM з використанням VP8 для самого відео й Vorbis для аудіо.

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• Настанови щодо типів та форматів мультимедіа у вебі

  • Формати контейнерів мультимедіа (типи файлів)
  • Настанови щодо кодеків вебвідео
  • Настанови щодо кодеків вебаудіо

• Позиціонування та розмір картинки всередині її рамок: object-position і object-fit

• <audio>

• Використання аудіо й відео HTML

• Взаємодія з відео за допомогою полотна

• Налаштування серверів для мультимедійних даних Ogg