Тег source определяет – CSS справочник — свойства по алфавиту и с описанием по разделам

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

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

В настоящее время существует 3 поддерживаемых формата видео (MP4, WebM, Ogg) и 3 формата аудио (MP3, Wav, Ogg):

БраузерMP4WebMOggMP3WavOgg
ChromeДаДаДа ДаДаДа
FirefoxДаДаДа ДаДаДа
OperaДаДаДа ДаДаДа
SafariДаНетНет ДаДаНет
IExplorerДаНетНет ДаНетНет
EdgeДаНетНет ДаДаНет

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

Атрибуты

АтрибутЗначениеОписание
mediamedia_queryУказывает, что файл адаптирован под определённые виды устройств.
srcURLУказывает URL адрес медиа-файла.
typemedia_typeУказывает MIME-типы для медиа.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <source></title>
	</head>
	<body>
		<h2>Видео в HTML5</h2>
		<video width = "320" height = "240" poster = "10.jpg" controls>
			<source src = "123.mp4" type = "video/mp4">
			<source src = "123.ogg" type = "video/ogg">
			<track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English">
			<track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default>
			Ваш браузер не поддерживает видео тег.
		</video>
	</body>
</html>

В этом примере мы:

Добавили на страницу видео (тег <video>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> атрибут type (MIME-типы для видео):

Формат MIME-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/webm

Благодаря тегу <track> добавили субтитры к видео:

  • Добавили путь к файлу атрибутом src.
  • Установили тип дорожки - субтитры kind = "subtitles" (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
  • Установили язык дорожки srclang = "ru".
  • Отобразили названия двух дорожек label = "English", label = "Russian".
  • Выбрали дорожку по умолчанию атрибутом default.

Результат нашего примера:

Ваш браузер не поддерживает видео тег. Добавление видео с субтитрами.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги

Тег source HTML5 » Энциклопедия HTML5

Элемент <source> </source>

В HTML5 добавили новый тег source, он создан для решения проблемы поддержки браузерми различных аудио/видео форматов.

Тег <source /> размещают между тегами <audio> </audio> и <video> </video>

Примеры кода тега source в тегах audio и video

Пример добавления аудиофайла при помощи тега

<audio>:


<audio controls="controls">
    <source src="baauer-harlem-shake.ogg" />
    <source src="baauer-harlem-shake.mp3" />
</audio>

Результат:

Странно, Safari почему то не видит тега аудио.

Пример добавления видеофайла при помощи тега <video>:


<video controls="controls" poster="teg-video.jpg">
    <source src="norwegian-army-harlem-shake.ogv" />
    <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

Странно, Safari почему то не видит тега видео.

На данный момент каждый браузер поддерживает только определённые аудио/видео форматы. Чтобы аудио/видеофайлы работали в каждом браузере, придумали тег <source />, который может указать путь на одну и ту же аудио/видеозапись, но записанную в разных форматах.

Для того чтобы аудио/видеофайлы работали во всех существующих популярных браузерах: FireFox, Opera, Chrome, Internet Explorer, Safari, достаточно лишь два аудио/видео формата, для аудио это .ogg и .mp3, для видео это .ogv и .mp4

Атрибуты тега <source />

media="all/braille/handheld/print/screen/speech/projection/tty/tv"
указывает на устройство, которое будет воспроизводить файл, по умолчанию имеет значение all
Определения значений:
all — все устройства,
braille — устройства созданные по системе Брайля,
handheld — планшетники, смартфоны,
print — принтеры,
screen — экран монитора,
speech — устройства воспроизводящие звук наподобие речевых синтезаторов, программ, браузеров,
projection — проекторы,
tty — телетайпы, терминалы и портативные устройства с ограниченными возможностями экрана,
tv — телевизоры.

src="адрес" — указывает путь к файлу.

type="mime-type; codecs='кодек'" — указывает на mime-type мультимедиа файла и его аудио/видео кодек, значения по умолчанию не имеет.

Значения арибута type=" " в зависимости от кодека:

Видео кодек Аудио кодек Контейнер Атрибут type
vorbis ogg type="audio/ogg; codecs='vorbis'"
speex ogg type="audio/ogg; codecs='speex'"
flac ogg type="audio/ogg; codecs='flac'"
mp3 type="audio/mpeg"
h.264 aac mp4 type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"
theora vorbis ogg type="video/ogg; codecs='theora, vorbis'"
theora speex ogg type="video/ogg; codecs='theora, speex'"
theora vorbis matroska type="video/x-matroska; codecs='theora, vorbis'"
vp8 vorbis webm type="video/webm; codecs='vp8, vorbis'"

Читать далее: тег audio

| HTML | WebReference

Вставляет звуковой или видеофайл для элементов <audio> и <video>. Обобщённо такие файлы называются медийными. Также применяется для добавления изображений в контейнере <picture>

Когда располагается внутри <audio> или <video>, элемент <source> (от англ.

source — исходник) должен идти после медийных файлов, но до <track>. Внутри <picture> он должен идти перед <img>.

Синтаксис

<audio>
 <source src="<адрес>">
</audio>

<video>
 <source src="<адрес>">
</video>

<picture>
 <source srcset="...">
</picture>

Закрывающий тег

Не обязателен.

Атрибуты

media
Определяет устройство, для которого будет воспроизводиться файл.
sizes
Задаёт размеры изображений для разных макетов страницы.
src
Адрес медиа-файла.
srcset
Изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).
type
MIME-тип медийного источника.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>source</title>
 </head>
 <body>
  <video controls="controls">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Элемент video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера показан на рис. 1.

Воспроизведение видеофайла

Рис. 1. Воспроизведение видеофайла

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег HTML источник ресурса HTML5

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

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

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

Синтаксис

<source атрибуты >

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

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

<!DOCTYPE html>
<html>
<head>
<title>Несколько ресурсов с помощью source</title>
</head>
<body>
<!-- Вставка видео -->
<video 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">
</picture>
<!-- Вставка аудио -->
<audio autoplay controls>
<source src="/music/track.mp3" type="audio/mpeg">
<source src="/music/track.ogg" type="audio/ogg">
Воспроизведение аудио-файла не поддерживается браузером
</audio>
</body>
</html>

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

Атрибуты

Атрибут Значения Описание
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

Тег | HTML справочник

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

12.0+ 9.0+ 3.5+ 4.0+ 10.5+ 4.0+

Описание

HTML тег <source> используется для указания расположения медийных ресурсов (файлов) для медиа-элементов, таких как <video> и <audio>.

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

Атрибуты

media:
Указывает под какие типы устройств оптимизирован файл. Браузеры могут использовать этот атрибут для определения, возможно ли воспроизведение файла или нет. Пример »
src:
Указывает URL-адрес медиа файла, который будет воспроизводится. Пример »
type:
Определяет MIME-тип медиа ресурса. Возможные значения атрибута для видео-файлов:
  • video/ogg
  • video/mp4
  • video/webm
для звуковых файлов: Пример »

Тег <source> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


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

Результат данного примера в окне браузера:

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

Атрибут media HTML тега source

Атрибут media определяет для какого медиа-устройства вывода оптимизирован медиа-файл.

Браузер может использовать этот атрибут для определения, может ли он воспроизвести данный файл или нет. Если воспроизвести файл невозможно, то браузер может не загружать его.

Атрибут media может принимать несколько значений.

Синтаксис

<source media="значение">

Значения атрибута

Операторы

Значение Описание
and Определяет оператор И
not Определяет оператор НЕ
, Определяет оператор ИЛИ

Устройства

Значение Описание
all Значение по умолчанию. Все устройства вывода.
aural Речевые синтезаторы
braille Устройства вывода на основе шрифта Брайля
handheld Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода)
projection Проекторы
print Печатающие устройства (например, принтеры)
screen Компьютерные мониторы
tty Телетайпы, терминалы и другие устройства с ограниченными возможностями экрана (для них нельзя использовать пикселы в качестве единиц измерения)
tv Телевизоры (для них характерно низкое разрешение и ограниченные возможности прокрутки)

Значения

Значение Описание
width Определяет ширину целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-width:500px)"
height Определяет высоту целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (max-height:700px)"
device-width Определяет всю доступную ширину экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-width:500px)"
device-height Определяет всю доступную высоту экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-height:700px)"
orientation Определяет ориентацию целевого дисплея/бумаги. Возможные значения - "portrait" или "landscape". Например, media="screen and (orientation: landscape)"
aspect-ratio Определяет соотношение ширины и высоты (width/height) целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (aspect-ratio:16/9)"
device-aspect-ratio Определяет соотношение device-width/device-height экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (devic-aspect-ratio:16/9)"
color Определяет число бит на цветовой канал дисплея. Можно использовать префиксы "min-" и "max-". Например, media="screen and (color:3)"
color-index Определяет количество цветов, поддерживаемых устройством. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-color-index:256)"
monochrome Определяет число бит на пиксель в монохромном фреймовом буфере. Можно использовать префиксы "min-" и "max-". Например, media="screen and (monochrome:2)"
resolution Определяет разрешение устройства (dpi или dpcm). Можно использовать префиксы "min-" и "max-". Например, media="screen and (resolution:300dp)"
scan Определяет тип развертки телевизионного экрана. Возможные значения - "progressive" или "interlace". Например, media="screen and (scan: interlace)"
grid Определяет, является ли устройство с фиксированным размером символов или нет. Возможные значения: "1" — устройство с фиксированным размером символов, "0" — нет. Например, media="handheld and (grid:1)"

Пример использования атрибута


<source src="//msiter.ru/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">

| Справочник HTML



Элемент <source> (от англ. "source" ‒ «источник») используется для указания расположения медийных ресурсов (файлов) для медиа-элементов, таких как <video> и <audio>. Также применяется для добавления изображений в контейнере <picture>.
В элементы <audio> и <video> для достижения кроссбраузерности обычно вкладывается сразу несколько элементов <source> с различными альтернативными форматами одного и того же файла (например, mp3, wav, ogg и т.д.).

Примечание: Когда располагается внутри <audio> или <video>, элемент <source> должен идти после медийных файлов, но до <track>. Внутри <picture> он должен идти перед <img>.

Синтаксис

<>
  ...
  <source src="...">
  ...
</>
или
<picture>
  ...
  <source srcset="...">
  ...
  <img src="..." alt="...">
</picture>

Закрывающий тег

Не обязателен.

Атрибуты

mediaHTML5
Указывает под какие типы устройств оптимизирован файл. Браузеры могут использовать этот атрибут для определения, возможно ли воспроизведение файла или нет.

sizesHTML5
Задаёт размеры изображений для разных макетов страницы.

srcHTML5
Указывает URL-адрес медиа файла, который будет воспроизводится.

srcsetHTML5
Изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).

type
MIME-тип медийного источника.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Тег <source> был добавлен в HTML5.

Пример использования:

Аудиоплеер с двумя звуковыми файлами. Браузер выберет, какой из них он может (если может) воспроизвести:

Пример HTML:

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

Элемент <picture> с двумя исходными файлами и резервным изображением:

Пример HTML:

Попробуй сам
<picture>
  <source media="(max-width: 25em)"
          srcset="iphone.png">

  <source media="(max-width: 48em)"
          srcset="[email protected]">

  <img src="iphone.png"
      alt="iPhone">

</picture>

Спецификации

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

Элемент
<source> 9+ 8+ 10.50+ Да 4+ 3.5+
Элемент
<source> 2+ 3.5+ 11+ 4+

Учебник HTML

HTML Элементы



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *