Тег source
Элемент <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 />
1.media="
указывает на устройство, которое будет воспроизводить файл, по умолчанию имеет значение all/braille/handheld/print/screen/speech/projection/tty/tv"all
Определения значений:
all - все устройства,
braille - устройства созданные по системе Брайля,
handheld - планшетники, смартфоны,
print - принтеры,
screen - экран монитора,
speech - устройства воспроизводящие звук наподобие речевых синтезаторов, программ, браузеров,
projection - проекторы,
tty - телетайпы, терминалы и портативные устройства с ограниченными возможностями экрана,
tv - телевизоры.
2. src="адрес" - указывает путь к файлу,
3. type="mime-type; codecs='кодек'" - указывает на mime-type мультимедиа файла и его
аудио/видео кодек, значения по умолчанию не имеет.
Значения арибута type=" " в зависимости от кодека:
| Видео кодек | Аудио кодек | Контейнер | Атрибут type |
|---|---|---|---|
| vorbis | ogg | type="audio/ogg; codecs='vorbis'" |
| speex | ogg | type="audio/ogg; codecs='speex'" |
| flac | ogg | type="audio/ogg; codecs='flac'" |
| mp3 | | type="audio/mpeg" |
h.264 | aac | mp4 | type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" |
theora | vorbis | ogg | type="video/ogg; codecs='theora, vorbis'" |
theora | speex | ogg | type="video/ogg; codecs='theora, speex'" |
theora | vorbis | matroska | type="video/x-matroska; codecs='theora, vorbis'" |
vp8 | vorbis | webm | type="video/webm; codecs='vp8, vorbis'" |
Читать далее: тег audio