HTML-тег `<source>`

Тег <source> является пустым элементом. Это означает, что у тега нет содержимого, а также закрывающего тега.

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

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

DANGER

Если тег <source> включен в теги <audio> или <video>, он должен располагаться перед тегом <track> и после медиафайлов. Если он находится внутри тега <picture>, он должен располагаться перед тегом <img>.

Синтаксис

Тег <source> является пустым, поэтому закрывающий тег не требуется. Однако в XHTML тег <source> должен быть закрыт (<source/>).

Пример использования HTML-тега `<source>`:

Пример использования HTML-тега <source>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="https://ru.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" alt="img_2" srcset="https://ru.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://ru.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
    </picture>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Try it Yourself »

Пример использования HTML-тега `<source>` с атрибутами src и type:

Источник видео | Пример | W3Docs.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type=video/mp4 />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Атрибуты

Атрибут	Значение	Описание
media	media_query	Указывает, что файл адаптирован для определенного типа устройств.
sizes		Указывает относительный допустимый размер источника. Добавлено в HTML5.
src	URL	Указывает URL-адрес медиафайла.
srcset	URL	Указывает изображения, которые используются в различных ситуациях (для экранов iPad, для экранов Retina и т.д.). Добавлено в HTML5.
type	Значение для видео: video/ogg video/mp4 video/webm Значение для аудио: audio/ogg audio/mpeg	Указывает MIME-тип медиаисточника.

Тег <source> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Какой из следующих вариантов правильно описывает использование HTML-тега <source>?

Тег <source> используется для указания нескольких медиаисточников для медиаэлементов, таких как <audio>, <video>.Тег <source> является самодостаточным и не требует закрывающего тега.Тег <source> лучше размещать после элементов <audio> или <video>.Тег <source> используется для определения исходных документов для элементов iframe.Атрибут 'type' в теге <source> используется для указания MIME-типа ресурса.

HTML-тег <source> ​

Синтаксис ​

Пример использования HTML-тега &lt;source&gt;: ​

Пример использования HTML-тега &lt;source&gt; с атрибутами src и type: ​