Синтаксис

<audio>
    <source src="...">
</audio>

или

<video>
    <source src="...">
</video>

или

<picture>
    <source srcset="...">
</picture>

Описание

Тег <source> (от англ. source  источник) используется для указания нескольких мультимедийных ресурсов для элементов мультимедиа, таких как <video>, <audio> и <picture>.

В одном мультимедийном элементе тег <source> может быть использован несколько раз, для указания альтернативных аудио/видео файлов и обозначения нескольких форматов.

Тег <source> не нужно закрывать.

Внимание!

Когда тег <source> заключен в контейнер <audio> или <video>, элемент <source> должен быть помещен до тега <track> и после медийных файлов. Внутри контейнера <picture> он должен стоять перед тегом <img>.

Атрибуты, которые можно использовать в теге <source>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут Значение Описание
media media_query

Указывает, что файл адаптирован под определённые виды устройств

sizes число

Указывает допустимые относительные размеры источника

src URL-адрес

Указывает URL-адрес медиа-файла

srcset URL-адрес

Указывает изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.)

type video/ogg
video/mp4
video/webm
audio/ogg
audio/wav
audio/mpeg

Указывает MIME-тип медийного источника

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег source</title>
</head>
<body>
    <audio controls>
        <source src="/sound.mp3" type="audio/mpeg">
        <source src="/sound.ogg" type="audio/ogg">
        <source src="/sound.wav" type="audio/wav">
     </audio>
</body>
</html>

Отображение в браузере:

Параметры CSS по умолчанию

Нет.

Поддержка браузера

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<source> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

Только свежие новости программирования и технологий каждый день.