/html/source:> Альтернативный ресурс_
Элемент source
Синтаксис
HTML
<[audio | video]>
...
<source src="...">
...
</[audio | video]>
или
<picture>
...
<source srcset="...">
...
<img src="..." alt="...">
</picture>
Описание
Элемент source
(от англ. "source" ‒ «источник») указывает расположение альтернативного ресурса (изображения, аудио, видео). В элементы audio
и video
для достижения кроссбраузерности обычно вкладывается сразу несколько элементов source
с различными форматами одного и того же файла (например, mp3, wav, ogg и т.д.).
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
5.0 | 4.7.8 The source element |
5.1 | |
XHTML | |
1.0 | |
1.1 |
Атрибуты
- media
- Указывает тип усройства под которое оптимизировано изображение.
- sizes
- Указывает допустимые размеры альтернативного изображения.
- src
- Указывает расположение альтернативного аудио/видео файла.
- srcset
- Указывает расположение альтернативного изображения.
- type
- Указывает MIME-тип встроенного ресурса.
- Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент source</title>
<link type="text/css" href="ex-style.css" rel="stylesheet">
</head>
<body>
<h1>Пример использования элемента "source"</h1>
<video controls>
<source src="/examples/multimedia/video/The_New_CLS.mp4" type="video/mp4">
<source src="/examples/multimedia/video/The_New_CLS.ogv" type="video/ogg">
</video>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент source</title>
<link type="text/css" href="ex-style.css" rel="stylesheet">
</head>
<body>
<h1>Пример использования элемента "source"</h1>
<video controls>
<source src="/examples/multimedia/video/The_New_CLS.mp4" type="video/mp4">
<source src="/examples/multimedia/video/The_New_CLS.ogv" type="video/ogg">
</video>
</body>
</html>
Элемент source