HTML Тег <source>
Приклад
Аудіопрогравач із двома вихідними файлами. Браузер вибере перший <source> (джерело), який він підтримує:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не підтримує елемент audio.
</audio>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <source> використовується для визначення кількох медіа-ресурсів для медіа-елементів, таких як <video>, <audio> та <picture>.
Тег <source> дає змогу вказати альтернативні файли відео/аудіо/зображень, які браузер може вибрати, залежно від підтримки браузера або ширини вікна перегляду. Браузер вибере перший <source>, який він підтримує.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| media | media_query | Приймає будь-який дійсний медіазапит, який зазвичай було б визначено в CSS |
| sizes | Визначає розміри зображень для різних макетів сторінок | |
| src | URL | Необхідний, коли <source> використовується в <audio> та <video>. Вказує URL-адресу медіафайлу |
| srcset | URL | Необхідний, коли <source> використовується в <picture>. Вказує URL-адресу зображення для використання в різних ситуаціях |
| type | MIME-type | Визначає MIME-тип ресурсу |
Глобальні атрибути
Тег <source> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <source> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використовуйте <source> разом з <video> для відтворення відео:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не підтримує тег video.
</video>
Спробуйте самі »
Приклад
Використовуйте <source> разом з <picture>, щоб визначити різні зображення на основі ширини вікна перегляду:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML Відео
HTML підручник: HTML Аудіо
HTML DOM довідник: Об’єкт Source
CSS налаштування за замовчуванням
Немає.
