Тег <source>

Источник медиа
  • Категории: Отсутствует
  • Контекст:

    Как дочерний элемент для <picture> перед элементом <img>, а также как дочерний элемент мультимедийного элемента перед любым потоковым контентом или элементами <track>.

  • Модель:

    Без содержимого.

Тег <source> (от англ. "source" - исходник) позволяет указать несколько альтернативных источников для элемента <img> в составе <picture>, а также для <audio> и <video>. Сам по себе он ничего не представляет.

Наиболее частые случаи использования <source>:

  • указать нескольких форматов для одного файла для лучшей совместимости с различными браузерами
  • выбрать нужное изображение в зависимости от условий: плотность пикселей, ширина вьюпорта и т.д.

Когда мы указываем несколько источников файла, браузер пытается подключить каждый из них по порядку, пока не найдет первый подходящий формат.

Атрибуты

  • Глобальные атрибуты
  • src - адрес ресурса для <audio> и <video>
  • type - тип ресурса для быстрого выяснения совместимости
  • srcset - источники изображений с условиями их использования (плотность пикселей, размер вьюпорта и т.д.) для <picture>
  • sizes - размеры изображений между точками останова
  • media - применимые media-выражения для <picture>

  • Источники для аудио

    Альтернативные источники для <audio> используются для указания одного и того же аудиофайла в нескольких форматах, чтобы обеспечить их лучшую совместимость в различных браузерах. Вы можете указать файл во всех доступных форматах, но в большинстве случаев достаточно использовать два из них: ".mp3" и ".ogg":

  • Источники для видео

    Альтернативные источники для <video> используются для указания одного и того же медиафайла в нескольких форматах, чтобы обеспечить их лучшую совместимость в различных браузерах. Всего HTML поддерживает три формата видео: ".mp4", ".webm" и ".ogg":

  • Источники для изображений

    Альтернативные источники в <picture> могут использоваться, чтобы предоставить несколько форматов изображений для их лучшей совместимости в различных браузерах:

  • Источники по медиа-выражению

    Альтернативные источники в <picture> могут содержать и более сложные условия, например, зависеть от текущей ширины окна браузера пользователя:

Поделитесь данной записью с друзьями