Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


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>

Нет.