Тег <source>

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

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

Атрибути

Специфічні атрибути

  • src — шлях до медіафайлу або зображення. Наприклад:
<source src="audio-file.mp3" type="audio/mpeg">
  • type — MIME-тип файлу, який допомагає браузеру визначити формат. Наприклад:
<source src="video-file.mp4" type="video/mp4">
  • media — медіа-запит, що дозволяє вказати умови для завантаження джерела. Використовується для адаптивного дизайну. Наприклад:
<source src="image-small.jpg" media="(max-width: 600px)">
  • sizes (для <picture>) — вказує розмір зображення залежно від медіа-запитів. Наприклад:
<source srcset="image-large.jpg" sizes="(max-width: 1200px) 100vw, 50vw">
  • srcset (для <picture>) — список зображень із різними роздільними здатностями. Наприклад:
<source srcset="image-1x.jpg 1x, image-2x.jpg 2x">

Глобальні атрибути

Тег <source> підтримує всі глобальні атрибути HTML, включаючи:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<source id="video-source" src="video.mp4" type="video/mp4">
  • class — дозволяє додати CSS-класи для стилізації або взаємодії зі скриптами. Наприклад:
<source class="media-source" src="audio.mp3" type="audio/mpeg">
  • style — інлайн-стилі для елемента. Наприклад:
<source style="display: none;" src="audio.mp3" type="audio/mpeg">

Приклади використання

1. Використання у <audio>

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    Ваш браузер не підтримує аудіо. <a href="audio-file.mp3">Завантажте файл</a>.
</audio>

Пояснення: Якщо браузер не підтримує формат MP3, він завантажить альтернативний формат OGG.

2. Використання у <video>

<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    Ваш браузер не підтримує відео. <a href="video-file.mp4">Завантажте відео</a>.
</video>

Пояснення: Браузер автоматично вибере перший підтримуваний формат відеофайлу.

3. Використання у <picture> для адаптивних зображень

<picture>
    <source srcset="image-small.jpg" media="(max-width: 600px)">
    <source srcset="image-large.jpg" media="(min-width: 601px)">
    <img src="fallback.jpg" alt="Адаптивне зображення">
</picture>

Пояснення: Браузер завантажить image-small.jpg для екранів менше 600px або image-large.jpg для більших екранів.

Додаткові моменти

  • Використання кількох тегів <source> допомагає оптимізувати завантаження мультимедіа для різних пристроїв та браузерів.
  • Браузери підтримують різні формати аудіо, відео та зображень. Тег <source> дозволяє задати альтернативи.
  • У зв’язці з <picture> і атрибутами media та srcset, тег <source> є потужним інструментом для створення адаптивних зображень.
  • Завжди додавайте альтернативний вміст, наприклад, текст або посилання на файл, щоб забезпечити доступність контенту у старих браузерах.
  • Тег <source> не має візуального впливу, але він забезпечує чистоту та гнучкість коду.