Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Справочник


HTML Теги



HTML Тег <source>



Пример

Аудиоплеер с двумя исходными файлами. Браузер выберет первый <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>

Нет.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.