Аудиоплеер с двумя исходными файлами. Браузер выберет первый source, который он поддерживает:
audio controls
source src="horse.ogg" type="audio/ogg"
source src="horse.mp3" type="audio/mpeg"
Ваш браузер не поддерживает аудиоэлемент.
/audio
Попробуйте сами »
Определение и использование source
Тег source используется для указания нескольких медиаресурсов для медиаэлементов, таких как video, audio, и picture.
Тег source позволяет указать альтернативные video/audio/image файлы, которые браузер может выбрать, основываясь на поддержке браузера или ширине видового экрана. Браузер выберет первый source, который он поддерживает.
Поддержка браузеров source
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| source | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Атрибуты source
| Атрибут | Значение | Описание |
|---|---|---|
| media | media_query | Принимает любой допустимый медиа запрос, который обычно определяется в CSS |
| sizes | Задает размеры изображений для различных макетов страниц | |
| src | URL | Требуется, когда source используется в audio и video. Указывает URL медиафайла |
| srcset | URL | Требуется, когда source используется в picture. Указывает URL изображения, который будет использоваться в различных ситуациях |
| type | MIME-type | Указывает MIME тип ресурса |
Глобальные атрибуты source
Тег source также поддерживает Глобальные атрибуты в HTML.
События атрибутов source
Тег source также поддерживает События атрибутов в HTML.
Еще примеры source
Используйте source внутри video для воспроизведения видео:
video width="320" height="240" controls
source src="movie.mp4" type="video/mp4"
source src="movie.ogg" type="video/ogg"
Ваш браузер не поддерживает видео элемент.
/video
Попробуйте сами »
Используйте source внутри picture для определения различных изображений в зависимости от ширины видового экрана:
picture
source media="(min-width:650px)" srcset="img_pink_flowers.jpg"
source media="(min-width:465px)" srcset="img_white_flower.jpg"
img src="img_orange_flowers.jpg" alt="Цветы" style="width:auto;"
/picture
Попробуйте сами »
Связанные страницы source
HTML Учебник: HTML Видео
HTML Учебник: HTML Аудио
HTML DOM Справочник: Объект Source
Настройки CSS по умолчанию source
Нет.