HTML тег `<source>`

Значение и применение

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

Внутри <audio> и <video> элемент задаёт альтернативные источники через src; внутри <picture> — варианты изображений через srcset. Браузер выбирает подходящий источник, а не загружает все варианты для одновременного показа.

Поддержка воспроизведения зависит от сочетания контейнера, кодеков, версии браузера и системы, а не только расширения файла. Проверяйте реальные файлы в целевых браузерах; несколько вариантов можно предложить через <source> с точными MIME-типами.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.source
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`source`	✓3	✓12	✓3.5	✓15	✓3.1	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`height`	✓90	✓90	✓108	✓76	✓15	✓90	✓108	✓64	✓15	✓15.0	✓90	✓15
`media`	✓3	✓12	✓15	✓15	✓3.1	✓18	✓15	✓14	✓2	✓1.0	✓4.4	✓2
`sizes`	✓38	✓13	✓38	✓25	✓9.1	✓38	✓38	✓25	✓9.3	✓3.0	✓38	✓9.3
`src`	✓3	✓12	✓3.5	✓15	✓3.1	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`srcset`	✓38	✓13	✓38	✓25	✓9.1	✓38	✓38	✓25	✓9.3	✓3.0	✓38	✓9.3
`type`	✓3	✓12	✓3.5	✓15	✓3.1	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`width`	✓90	✓90	✓108	✓76	✓15	✓90	✓108	✓64	✓15	✓15.0	✓90	✓15
Ещё 7 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`media`	`media_query`	Указывает, что файл адаптирован под определённые виды устройств.
`src`	`URL`	Указывает URL адрес медиа-файла.
`type`	`media_type`	Указывает MIME-типы для медиа.
`srcset`	Источники изображений	Список файлов и дескрипторов для `<picture>`.
`sizes`	Размеры и условия	Размер изображения для выбора источника с дескриптором ширины.
`width`, `height`	Числа	Размеры изображения для источника внутри `<picture>`.

Примеры, попробуйте сами

Запустите локальное видео и выберите дорожку субтитров. Для своего документа сохраните видео и файлы субтитров рядом с HTML.

HTML

<video controls width="320" height="240"><source src="sample.mp4" type="video/mp4"><track src="ru.vtt" kind="subtitles" srclang="ru" label="Русский" default><track src="en.vtt" kind="subtitles" srclang="en" label="English">Ваш браузер не поддерживает video.</video>

Видео · Русские субтитры · Английские субтитры

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".

HTML тег <source>