<source> – елемент джерела медійного ресурсу чи зображення

Елемент HTML <source> (джерело) задає один або кілька медійних ресурсів для елементів <picture>, <audio> та <video>. Це пустий елемент, тобто він не має вмісту і не вимагає кінцевого тегу. Нерідко він використовується для подачі одного й того ж медійного вмісту в кількох форматах файлів, щоб забезпечити сумісність з широким спектром браузерів, враховуючи їх різну підтримку форматів файлів зображень та форматів медійних файлів.

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

Атрибути

Цей елемент підтримує всі глобальні атрибути. Крім того, на ньому можна використовувати наступні атрибути:

type

Задає тип MIME зображення або інший медійний тип, необов'язково – з параметром codecs.

src

Задає URL медійного ресурсу. Обов'язковий, якщо батьківським елементом є <audio> або <video>. Не дозволяється, якщо батьківським елементом є <picture>.

srcset

Задає розділений комами список з одного або кількох URL зображень і їхніх дескрипторів. Обов'язковий, якщо батьківським елементом <source> є <picture>. Не дозволяється, якщо батьківським елементом є <audio> або <video>.

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

• URL, що задає розташування зображення.
• Необов'язкового дескриптора ширини – додатне ціле число, після якого зразу стоїть "w", наприклад, 300w.
• Необов'язкового дескриптора піксельної щільності – додатне число з рухомою комою, після якого зразу стоїть "x", наприклад, 2x.

Кожний рядок у списку повинен містити або дійсний дескриптор ширини, або дійсний дескриптор піксельної щільності. Ці два дескриптори не повинні використовуватися разом; використовуйте лише один з них у всьому списку. Значення кожного дескриптора у списку повинно бути унікальним. Браузер на основі цих дескрипторів обирає найбільш доцільне зображення для виведення в певну мить часу. Якщо дескриптори не задані, то усталене значення – 1x. Якщо також присутній атрибут sizes, то кожний рядок повинен містити дескриптор ширини. Якщо браузер не підтримує srcset, то для виведення зображення буде використано усталене джерело зображення.

sizes

Задає список розмірів джерел, що описують остаточну ширину візуалізації зображення. Дозволений, якщо батьківським елементом <source> є <picture>. Не дозволяється, якщо батьківським елементом є <audio> або <video>.

Цей список складається з розділених комами розмірів джерел. Кожен розмір джерела – це пара з медійної умови та довжини. Перед компонуванням сторінки браузер використовує цю інформацію, щоб визначити те, яке зображення, визначене в srcset, показати. Зверніть увагу, що sizes буде діяти лише у випадку, якщо з допомогою srcset надані дескриптори ширини, а не дескриптори піксельної щільності (тобто слід використовувати 200w, а не 2x).

media

Задає медійний запит для бажаного медійного ресурсу.

height

Задає власну висоту зображення в пікселях. Дозволений, якщо батьківським елементом <source> є <picture>. Не дозволяється, якщо батьківським елементом є <audio> або <video>.

Значення висоти повинно бути цілим числом без будь-яких одиниць.

width

Задає власну ширину зображення в пікселях. Дозволений, якщо батьківським елементом <source> є <picture>. Не дозволяється, якщо батьківським елементом є <audio> або <video>.

Значення ширини повинно бути цілим числом без будь-яких одиниць.

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

Елемент <source> є пустим елементом, тобто він не має вмісту і не вимагає кінцевого тегу. Це означає, що "</source>" ніколи не використовується в HTML.

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

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

Якщо жодний з елементів <source> не надає корисного джерела:

• У випадку елемента <picture> браузер відступає до зображення, заданого в дочірньому елементі <img> елемента <picture>.
• У випадку елемента <audio> або <video> браузер відступає до відображення вмісту, включеного між початковим і кінцевим тегами.

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

Приклади

Використання атрибута type вкупі з <video>

Цей приклад демонструє, як пропонувати відео в різних форматах: WebM для браузерів, що його підтримують, Ogg для тих, що підтримують Ogg, і QuickTime для браузерів, що підтримують QuickTime. Якщо елемент <audio> або <video> не підтримується браузером, то замість нього відображається сповіщення. Якщо браузер підтримує елемент, але не підтримує жодного з заданих форматів, то виникає подія error, а усталені елементи керування медіа (якщо вони ввімкнені) вказують на помилку. Для отримання докладнішої інформації про те, які формати медіафайлів використовувати і які з них підтримуються браузерами, дивіться наш Посібник з медійних типів і форматів.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  Пробачте; ваш браузер не підтримує відео HTML.
</video>

Використання атрибута media вкупі з <video>

Цей приклад демонструє, як пропонувати альтернативний файл джерела, коли ширина області перегляду перевищує певне значення. Якщо середовище перегляду користувача відповідає заданій умові media, то вибирається відповідний елемент <source>. Потім запитується і візуалізується вміст його атрибута src. Якщо умова media не виконується, то браузер переходить до наступного елемента <source> у списку. Другий варіант елемента <source> у наведеному нижче коді не має умови media, тому він буде вибраний для всіх решти контекстів перегляду.

<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  Пробачте; ваш браузер не підтримує відео HTML.
</video>

Більше прикладів є в статті Відео та аудіо вміст області Вивчення; це чудовий ресурс.

Використання атрибута media вкупі з <picture>

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

<picture>
  <source srcset="webdoky-logo-wide.png" media="(min-width: 800px)" />
  <source srcset="webdoky-logo-medium.png" media="(min-width: 600px)" />
  <img src="webdoky-logo-narrow.png" alt="ВебДоки" />
</picture>

У випадку елемента <picture> необхідно завжди додавати елемент <img> із запасним зображенням. Також переконайтеся, що додали атрибут alt заради доступності, якщо зображення не є суто декоративним і має певне значення у вмісті.

Використання атрибутів height та width вкупі з <picture>

У цьому прикладі три елементи <source> з атрибутами height та width додані всередину елемента <picture>. Медійний запит дозволяє браузеру вибрати зображення для відображення завдяки атрибутам height та width на основі розміру області перегляду.

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-width: 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Зображення, що використовується, коли браузер не підтримує жодне з джерел"
    width="500"
    height="400" />
</picture>

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

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

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

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

• Елемент <audio>
• Елемент <picture>
• Елемент <video>
• Посібник з типів і форматів зображень
• Посібник з медійних типів і форматів
• Продуктивність у Вебі