Элемент <source> </source>

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

Тег <source /> размещают между тегами <audio> </audio> и <video> </video>

Примеры кода тега source в тегах audio и video

Пример добавления аудиофайла при помощи тега <audio>:

<audio controls="controls">
    <source src="baauer-harlem-shake.ogg" />
    <source src="baauer-harlem-shake.mp3" />
</audio>

Результат:

Пример добавления видеофайла при помощи тега <video>:

<video width="560" height="315" controls="controls" poster="teg-video.jpg">
    <source src="norwegian-army-harlem-shake.ogv" />
    <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

На данный момент каждый браузер поддерживает только определённые аудио/видео форматы. Чтобы аудио/видеофайлы работали в каждом браузере, придумали тег <source />, который может указать путь на одну и ту же аудио/видеозапись, но записанную в разных форматах.

Для того чтобы аудио/видеофайлы работали во всех существующих популярных браузерах: FireFox, Opera, Chrome, Internet Explorer, Safari, достаточно лишь два аудио/видео формата, для аудио это .ogg и .mp3, для видео это .ogv и .mp4

Атрибуты тега <source />

media="all/braille/handheld/print/screen/speech/projection/tty/tv"
указывает на устройство, которое будет воспроизводить файл, по умолчанию имеет значение all
Определения значений:
all — все устройства,
braille — устройства созданные по системе Брайля,
handheld — планшетники, смартфоны,
print — принтеры,
screen — экран монитора,
speech — устройства воспроизводящие звук наподобие речевых синтезаторов, программ, браузеров,
projection — проекторы,
tty — телетайпы, терминалы и портативные устройства с ограниченными возможностями экрана,
tv — телевизоры.

src="адрес" — указывает путь к файлу.

type="mime-type; codecs='кодек'" — указывает на mime-type мультимедиа файла и его аудио/видео кодек, значения по умолчанию не имеет.

Значения арибута type=" " в зависимости от кодека:

Читать далее: тег audio