Тег | HTML справочник
HTML тегиЗначение и применение
Тег <source> позволяет указать несколько мультимедийных файлов в различном формате. Это необходимо, чтобы браузер смог выбрать подходящий / поддерживаемый формат для загрузки и дальнейшего воспроизведения аудио, либо видео.
В настоящее время существует 3 поддерживаемых формата видео (MP4, WebM, Ogg) и 3 формата аудио (MP3, Wav, Ogg):
| Браузер | MP4 | WebM | Ogg | MP3 | Wav | Ogg |
|---|---|---|---|---|---|---|
| Chrome | Да | Да | Да | Да | Да | Да |
| Firefox | Да | Да | Да | Да | Да | Да |
| Opera | Да | Да | Да | Да | Да | Да |
| Safari | Да | Нет | Нет | Да | Да | Нет |
| IExplorer | Да | Нет | Нет | Да | Нет | Нет |
| Edge | Нет | Нет | Да | Да | Нет |
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| media | media_query | Указывает, что файл адаптирован под определённые виды устройств. |
| src | URL | Указывает URL адрес медиа-файла. |
| type | media_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-типы |
|---|---|
| MP4 | video/mp4 |
| Ogg | video/ogg |
| WebM | video/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
Редакторы: Влад Мержевич
Тег 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 для видео:
MIME-type для аудио:
|
Тег | 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>
Результат данного примера в окне браузера:
Атрибут media HTML тега source
Атрибут media определяет для какого медиа-устройства вывода оптимизирован медиа-файл.
Браузер может использовать этот атрибут для определения, может ли он воспроизвести данный файл или нет. Если воспроизвести файл невозможно, то браузер может не загружать его.
Атрибут media может принимать несколько значений.
Синтаксис
<source media=»значение«>
Значения атрибута
Операторы
| Значение | Описание |
|---|---|
| and | Определяет оператор И |
| not | Определяет оператор НЕ |
| , | Определяет оператор ИЛИ |
Устройства
| Значение | Описание |
|---|---|
| all | Значение по умолчанию. Все устройства вывода. |
| aural | Речевые синтезаторы |
| braille | Устройства вывода на основе шрифта Брайля |
| handheld | Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода) |
| projection | Проекторы |
| Печатающие устройства (например, принтеры) | |
| 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 Элементы