Тег <source> определяет несколько мультимедийных файлов в различных форматах, таких как <video> и <audio>. Это необходимо для достижения кроссбраузерности; браузер может выбрать из доступных вариантов тот формат, который он поддерживает и без проблем воспроизвести аудио или видео файл.
Тег <source> также используется также для добавления изображений в контейнере <picture>.
В одном документе элемент <source> может быть использован несколько раз для указания альтернативных аудио/видео файлов и обозначения нескольких форматов.
Если тег <source> заключен в теги <audio> или <video>, элемент <source> должен быть помещен до файла <track> и после медийных файлов. Внутри элемента <picture> он должен стоять перед <img>.
Синтаксис
Закрывающий тег </source> не обязателен.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
</picture>
<p>Lorem Ipsum – это текст-“рыба”, часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной “рыбой” для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</body>
</html>Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Некоторая информация о видео</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| media | media_query | Указывает, что файл адаптирован под определённые виды устройств. |
| sizes |
Указывает допустимые относительные размеры источника. Добавлен в HTML5. |
|
| src | URL | Указывает URL адрес медиа-файла. |
| srcset | URL |
Указывает изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).
Добавлен в HTML5. |
| type |
Значения для видео:
video/ogg
video/mp4
video/webm Значения для аудио: audio/ogg audio/mpeg |
Указывает MIME-тип медийного источника. |
Тег <source> поддерживает также глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 4+ | 3.5+ | 4+ | 10.5+ |
Практикуйте свои знания
Что такое HTML тег <source>?
Правильный!
Неправильно!