HTML-тег <source>

HTML-тег <source> используется для определения нескольких медиаресурсов для таких элементов, как <video> , <audio> и <picture> . Он обеспечивает гибкость при указании различных форматов, разрешений и условий воспроизведения медиаконтента, обеспечивая адаптивную и оптимизированную доставку в зависимости от пользовательских устройств и возможностей браузера.

Тег <source> должен быть вложен в родительский элемент, к которому он применяется, и не имеет закрывающего тега(самозакрывающийся). В одном родительском элементе можно использовать несколько тегов <source> .

Базовый синтаксис тега HTML <source>

Базовая структура тега <source> внутри различных родительских элементов:

Для видео: 

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Для аудио: 

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>

Для изображения: 

<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="image-default.jpg" alt="A responsive image">
</picture>

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

Атрибуты HTML-тега <source>

  • src: Указывает URL-адрес медиаресурса.
  • тип: определяет тип MIME медиаресурса(например, video/mp4 , audio/ogg ).
  • media: определяет медиа-запрос для выбора ресурса, обычно используемый в теге <picture> .
  • srcset: Предоставляет список источников изображений и дескрипторов для адаптивных изображений, применимых в теге <picture> .
  • sizes: Задает атрибут размеров для изображений, используемый вместе с srcset в адаптивных изображениях.

Эти атрибуты позволяют тегу <source> обрабатывать разнообразные сценарии доставки видео, аудио и изображений.

Пример видео с несколькими форматами

Вот пример использования тега <source> с элементом <video> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Video Example</h2>
        <video controls width="600">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Объяснение: Браузер проверяет форматы в указанном порядке, используя первый совместимый ресурс. Если ни один из них не поддерживается, отображается аварийное сообщение.

Пример изображения для адаптивных изображений

Тег <source> также можно использовать для адаптивных изображений с тегом <picture> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Responsive Image Example</h2>
        <picture>
            <source srcset="image-large.jpg" media="(min-width: 800px)">
            <source srcset="image-small.jpg" media="(max-width: 799px)">
            <img src="image-default.jpg" alt="A responsive image">
        </picture>
    </body>
</html>

Пояснение: Браузер выбирает наиболее подходящий источник изображения в зависимости от размера экрана. Для устройств с шириной экрана более 800 пикселей загружается «image-large.jpg», а для устройств с меньшим размером экрана — «image-small.jpg».

Стилизация медиа с помощью CSS

Вы можете стилизовать родительские элементы тега <source> , например <video> , <audio> или <img> , чтобы улучшить их внешний вид: 

<style>
    video, img {
        border: 2px solid #007BFF;
        border-radius: 8px;
    }
</style>

Результат: Видеоролики, изображения и другие элементы мультимедиа можно стилизовать с помощью специальных рамок и закругленных углов для придания им изысканного вида.

Практическое применение тега <source>

  • Адаптивные изображения: создавайте оптимизированные изображения для экранов разных размеров с помощью элемента <picture> .
  • Совместимость с видео: поддержка нескольких форматов видео(например, MP4, WebM, OGG) для обеспечения совместимости со всеми браузерами.
  • Параметры звука: поддержка различных аудиоформатов(например, MP3, OGG) для различных браузеров.
  • Оптимизация производительности: загрузка соответствующих медиафайлов в зависимости от устройства пользователя или скорости соединения.

Тег <source> является ключевым компонентом для создания адаптивного, эффективного и удобного для пользователя мультимедийного опыта в Интернете.