<audio> и <video>! Иногда на сайт требуется добавить медиаконтент, в том числе это может быть аудиодорожка или блок с видео. Теги
<audio> и <video> позволяют это сделать, и каждый из них может использовать тег <source> для определения множественных источников медиа, подобно его использованию в <picture>.🔊 Тег
<audio>Атрибуты:
-
src: URL файла.-
preload: Управляет предзагрузкой данных; может быть none (не предзагружать), metadata (загружать только метаданные) или auto (предзагрузка данных).-
controls: Показывает элементы управления - кнопки воспроизведения/паузы, управление громкостью и так далее.-
autoplay, loop, muted: Автоматическое воспроизведение, повтор после завершения и отключение звука соответственно.Пример использования:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<!-- Если ни один из ресурсов не подошёл -->
Ваш браузер не поддерживает тег audio.
</audio>
🎥 Тег
<video>Атрибуты:
-
src, preload, controls, autoplay, loop, muted: Аналогичны тегу <audio>. -
poster: Изображение до загрузки видео.-
width и height: Размеры видеоплеера.Пример:
<video controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<!-- Если ни один из ресурсов не подошёл -->
Ваш браузер не поддерживает тег video.
</video>
🔗 Для более глубокого изучения мультимедийных возможностей HTML рекомендуем ознакомиться с подробным руководством на MDN.