ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML БОЛЬШЕ 🔍 ◑ КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ
HTML теги. Полный справочник

HTML тег <source>

❮ Prev Полный HTML справочник Next ❯

Пример

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

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио элементы.
</audio>
Попробуйте сами »

Больше примеров "Попробуйте сами" ниже.

Определение и использование

Тег <source> используется для указания нескольких медиа-ресурсов для медиа-элементов, таких как <video>, <audio> и <picture>.

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

Поддержка браузерами

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<source> 4.0 9.0 3.5 4.0 10.5

Различия между HTML 4.01 и HTML5

Тег <source> новый в HTML5.

Атрибуты

Атрибут Значение Описание
src URL Требуется, когда <source> используется в <audio> и <video>. Определяет URL медиа-файла
srcset URL Требуется, когда <source> используется в <picture>. Определяет URL изображения для использования в различных ситуациях
media media_query Принимает любой допустимый медиа-запрос, который обычно определяется в CSS
sizes   Определяет размеры изображения для разных макетов страниц
type MIME-type Определяет MIME-тип ресурса

Глобальные атрибуты

Тег <source> также поддерживает Глобальные атрибуты в HTML.

Атрибуты событий

Тег <source> также поддерживает Атрибуты событий в HTML.

Больше примеров

Пример

Элемент <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 учебник: HTML5 Видео

HTML учебник: HTML5 Аудио

HTML DOM справочник: Объект Source

Настройки CSS по умолчанию

Отсутствуют.

❮ Prev Полный HTML справочник Next ❯