Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON PHP КАК СДЕЛАТЬ
     ❯   

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- © Copyright. Все права защищены. Schoolsw3 работает на SW3.CSS.