html.okpython.net
HTML и CSS для начинающих

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> пропускается.
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

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>
  &ndash; ролик имеет постер и контрольную панель.
</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