
html.okpython.net
Основы создания сайтов
HTML :: Тег <source>
В HTML тег <source> (от англ. source – источник) презназначен для указания нескольких медиа-ресурсов для элементов <audio>, <video> и <picture>, позволяя тем самым использоватьдля обслуживания одного и того же медиа-контента нескольких форматов данных, обеспечивая поддержку различными браузерами.
Синтаксис
<source> (закрывающий тег отсутствует)
Атрибуты
- media – в качестве значения принимает строку с медиа-запросом, согласно которому будет выводиться изображение в элементе <picture>.
- sizes – в качестве значения принимает список разделённых запятыми медиа-запросов со значениями ширины изображения в единицах vw (например, sizes="(max-width: 1024px) 90vw, (min-width: 1440px) 70vw, 50vw"). Эта информация используется браузером для определения конкретного изображения, заданного в атрибуте srcset, которое будет отображено на странице при помощи элемента <picture>.
- src – в качестве значения принимает полный или относительный путь к медиа-файлу (подробнее здесь).
-
srcset – используется в элементе
<picture> и в качестве значения принимает набор параметров возможных
изображений для отображения их в браузере. Каждый набор параметров отделяется от соседнего запятой и может включать в себя разделяющиеся
пробелами компоненты:
- полный или относительный путь к изображению;
- дескриптор ширины изображения, представляющий собой натуральное число (ширина изображения в пикселях), за которым следует символ w (например, для изображения шириной 700px дескриптор будет иметь вид 700w); если значение не указывается, то по умолчанию используется бесконечность;
- дескриптор плотности пикселей дисплея, представляющий собой положительное десятичное число, за которым следует символ x (например, 2x); если значение не указывается, то по умолчанию используется 1x. Каждый набор параметров должен содержать хотя бы дескриптор ширины или дескриптор плотности пикселей.
- type – указывает MIME-тип подключаемого медиа-файла. Ознакомиться с полным списком mime-типов можно на сайте Мозилы здесь или на Википедии здесь. Если браузер не подерживает данный тип, то элемент <source> пропускается.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/source
Примеры
HTML
Результат
htmlCodes

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="https://site.name/"> <title>Пример №1</title> </head> <body> <p> <video poster="html/html_images/textbook_images/dog_foto.jpg" controls> <!-- Атрибуты type опускаем, т.к. браузеры попытаются --> <!-- подобрать нужный кодек из доступного набора --> <source src="html_files/video/Саймон.ogg"> <source src="html_files/video/Саймон.mp4"> </video> <br> – ролик имеет постер и контрольную панель. </p> </body> </html>
Пример №1
HTML
Результат
htmlCodes

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> </head> <body> <p> При изменении ширины окна браузер будет автоматически<br> подбирать подходящий размер изображения. </p> <picture> <source srcset="robot_2.png" media="(min-width: 1000px)"> <source srcset="robot_1.png" media="(min-width: 700px) and (max-width: 999px)"> <img src="robot.png" alt="Робот Вася"> </picture> </body> </html>
Пример №2
HTML
Результат
htmlCodes

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №3</title> </head> <body> <p> При изменении ширины окна браузер будет автоматически<br> подбирать размер изображения:<br> 10vw для экранов с шириной до 999px,<br> 15vw для экранов с шириной более 999px. </p> <picture> <source srcset="robot_2.png 150w, robot_1.png 100w" sizes="(max-width: 999px) 10vw, (min-width: 1000px) 15vw" > <img src="robot.png" alt="Робот Вася"> </picture> </body> </html>
Пример №3