<source> - HTML-елемент джерела медіа
HTML-елемент <source> визначає декілька медіа-ресурсів для елементів <picture>, <audio> та <video>. Це порожній елемент, що дозволяє надавати один і той же медіа-контент у різних форматах, які підтримуються різними браузерами, або для різних умов відображення.
Елемент <source> дозволяє браузеру вибрати найбільш підходящий медіа-ресурс залежно від його можливостей або налаштувань. Браузер перевіряє кожен елемент <source> по порядку і вибирає перший, який він може відтворити або відобразити.
Синтаксис
<source>Атрибути
Цей тег може мати глобальні атрибути.
srcОбов’язковий для
<audio>та<video>. Вказує URL-адресу медіа-ресурсу.srcsetОбов’язковий для
<picture>. Список з одного або більше рядків, розділених комами, що вказують на можливі джерела зображень для браузера. Це дозволяє надавати різні версії зображення для різних розмірів екрана або щільності пікселів.typeMIME-тип ресурсу. Це допомагає браузеру визначити, чи може він відтворити файл, не завантажуючи його.
mediaМедіа-запит, який визначає, для яких умов призначений цей ресурс (наприклад,
(max-width: 600px)). Використовується в<picture>.sizesСписок з одного або більше рядків, розділених комами, що визначають розміри зображення для різних умов макета. Використовується разом з
srcsetв<picture>.widthШирина зображення в пікселях. Використовується в
<picture>.heightВисота зображення в пікселях. Використовується в
<picture>.
Технічне резюме
| Категорія контенту | Немає. |
|---|---|
| Дозволений вміст | Немає, це пустий елемент. |
| Пропуск тегів | Повинен мати початковий тег і не повинен мати кінцевого тегу. |
| Дозволені батьківські елементи | |
| Роль ARIA | Немає відповідної ролі. |
| DOM інтерфейс |
|
Приклади використання
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Опис зображення">
</picture><video controls>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
Ваш браузер не підтримує відтворення відео.
</video><audio controls>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
Ваш браузер не підтримує відтворення аудіо.
</audio>Підтримка браузерів
<source> | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
height | |||||||||||||
media | |||||||||||||
sizes | |||||||||||||
src | |||||||||||||
srcset | |||||||||||||
type | |||||||||||||
width |