HTML <source> тег

  • Предыдущая страница <small>
  • Следующая страница <span>

Определение и использование

<source> Тег используется для media элементов (например <video>,<audio> и <picture>）Указать несколько медиа-ресурсов.

<source> Тег позволяет вам specify альтернативные видео/аудио/изображения файлов, браузер выбирает первый поддерживаемый. <source>.

См. также:

HTML учебник:HTML видео

HTML учебник:HTML аудио

HTML DOM справочник:Объект Source

Пример

Пример 1

Это аудиоплеер с двумя аудиофайлами. Браузер выберет первый поддерживаемый. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает тег аудио.
</audio>

Попробуйте сами

Пример 2

Использование в <video>; <source> Просмотр видео:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег видео.
</video>

Попробуйте сами

Пример 3

Использование в <picture>; <source> Определите различные изображения в зависимости от ширины просмотра:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Попробуйте сами

Атрибут

Атрибут Значение Описание
media Медиа-запрос принимаeт любую действительную медиа-запрос, обычно определяемую в CSS.
sizes Определяет размер изображения для различных макетов страниц.
src URL

Используется для указания URL файла媒体的.

Этот атрибут обязателен, когда <source> используется для <audio> и <video>.
srcset URL

Используется для указания URL изображения, которое используется в различных ситуациях.

Этот атрибут обязателен, когда <source> используется в <picture>.
type MIME-тип Определяет MIME-тип ресурса.

Глобальные свойства

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

Свойства событий

<source> Этот тег также поддерживает Свойства событий в HTML.

Стандартные настройки CSS

Нет.

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5
  • Предыдущая страница <small>
  • Следующая страница <span>