Тег <source> HTML источник ресурса

Рейтинг: 5 из 5, голосов 2
+++++

Тег <source> используется для определения нескольких файлов-ресурсов в тегах <video>, <audio>, <picture>.

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

Этот тег был введен в HTML5.

Синтаксис

<source атрибуты >

В зависимости от тега, к которому относится <source>, используются разные атрибуты.

Примеры использования <source> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Несколько ресурсов с помощью source</title>
</head>
<body>
<!-- Вставка видео -->
<video width="1280" height="720" autoplay controls loop>
<source src="/video/my_video.mp4" type="video/mp4">
<source src="/video/my_video.ogg" type="video/ogg">
Воспроизведение видео-файла не поддерживается браузером
</video>
<!-- Вывод нескольких изображений в зависимости от ширины окна -->
<picture>
<source media="(min-width: 1000px)" srcset="image_1.jpg">
<source media="(min-width: 500px)" srcset="image_2.jpg">
<img src="image_3.jpg" alt="Images" style="width: auto; height: auto;">
</picture>
<!-- Вставка аудио -->
<audio autoplay controls>
<source src="/music/track.mp3" type="audio/mpeg">
<source src="/music/track.ogg" type="audio/ogg">
Воспроизведение аудио-файла не поддерживается браузером
</audio>
</body>
</html>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<source> Да 9+ Да Да Да

Атрибуты

Атрибут Значения Описание
src URL

Указывает адрес медиа-файла. Обязателен при использовании внутри <video> и <audio>.

srcset URL

Указывает адрес медиа-файла. Обязателен при использовании внутри <picture>.

media media_query

Определяет условие, при котором будет использован данный ресурс.

sizes media_query + length

Устанавливает размеры изображения в зависимости от media-условия. Экспериментальный атрибут.

type MIME-type

Указывает MIME-тип ресурса.

MIME-type для видео:

  • OGG: video/ogg
  • MP4: video/mp4
  • WebM: video/webm

MIME-type для аудио:

  • OGG: audio/ogg
  • MP3: audio/mpeg
  • WAV: audio/wav
Оцените, насколько полезна эта статья
+++++
Эти материалы могут быть вам полезны
Тег <audio> HTML аудио, музыкаТег <video> HTML видео на сайт
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.