w3docs logo

HTML тег <source>

Тег <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> поддерживает также глобальные атрибуты и атрибуты событий.

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

chrome firefox safari opera
4+ 3.5+ 4+ 10.5+

Практикуйте свои знания

Что такое HTML тег <source>?
❮ Назад Вперед ❯
Считаете ли это полезным?