САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

Найти всё для обучения

HTML Тег <source>



Пример

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

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

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

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

Тег <source> позволяет указать альтернативные video/audio/image файлы, которые браузер может выбрать, основываясь на поддержке браузера или ширине видового экрана. Браузер выберет первый <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>
Попробуйте сами »

Пример

Используйте <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="Цветы" style="width:auto;">
</picture>
Попробуйте сами »

Связанные страницы

HTML Учебник: HTML Видео

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

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


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

Нет.