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

{{HTMLSidebar}}

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

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

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

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

Атрибути

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

autoplay

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

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

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

В певних браузерах (наприклад, Chrome 70.0) автоматичне відтворення не працює, якщо немає атрибута muted.

autopictureinpicture

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

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.

Примітка:

• Атрибут 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">посилання на відео</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, щоб йому було легше задати розташування, розмір тощо, а потім надати стилізацію та інформацію про компонування, як необхідно. Певні методи стилізації наведено в основах стилізації програвача відео.

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

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

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

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

HTMLMediaElement.textTracks

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

Наприклад, для відстеження додавання чи вилучення з елемента <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 увімкнений).

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

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

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

AddType video/webm .webm

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

Приклади

Одне джерело

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

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.ogv"
    type="video/ogg" />
  <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"
    >стягнути файл MP4</a
  >
  і переглянути його в своєму улюбленому програвачі відео!
</video>

Результат

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

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

Занепокоєння щодо доступності

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

Варто зауважити, що хоч можна додати субтитри до суто звукового мультимедіа, це можливо лише при відтворенні аудіо в елементі <video>, оскільки область відео елемента використовується для показу субтитрів. Це один з особливих сценаріїв, за яких корисно відтворювати аудіо в елементі 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
[Гучний стукіт]
[Брязкіт посуду]

Субтитри не повинні затуляти головного об'єкта відео. Їх можна розташувати за допомогою налаштування репліки VTT align.

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

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

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

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

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

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

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

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

• <audio>

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

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

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