Coding-space.ru
menu

Добавление аудио и видео на сайт

Как уже говорилось, HTML5 принес много новых и полезных тегов. И в этой главе мы познакомимся с тегами добавления аудио, видео и полосы прогресса.

Аудио файлы на сайт <audio>

С введением HTML5 у нас появилась возможность очень легко вставить аудио на наш сайт, просто использяю тег <audio>

Данный тег существует в двух вариациях. Отличаются они только способом указания подключения аудио файла к сайту. Например, мы можем подключить так:

<audio src="music.mp3" controls>
Упс.. Аудио не поддерживается.
</audio>
Если браузер не поддерживает аудио, тогда будет отображён текст, помещенный между тегами <audio>

Второй способ позволяет подключить аудио в нескольких форматах, на случай если один из форматов не будет поддерживаться браузером.

<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
Аудио не поддерживается Вашим браузером..
</audio>
Полезные атрибуты аудио

Атрибут controls

controls сообщает браузеру, что нужно отобразить панель управления к аудиофайлу.

Атрибут loop

loop повторяет воспроизведение файла после его завершения.

Атрибут autoplay

autoplay воспроизводит файл сразу после загрузки страницы.

Атрибут preload

preload загружает файл вместе с загрузкой веб-страницы.

Вставка видео на сайт <video>

<video controls>
<source src="video.mp4" type="video/mpeg">
<source src="video.ogg" type="video/ogg">
Видео не поддерживается Вашим браузером..
</video>
Одинаковые атрибуты

Теги <audio> и <video> имеют одинаковые атрибуты.

Помогайте другим!

Ниже находится секция с комментариями, мы призываем всех делиться своими знаниями по данной теме, помогать другим.
Так же Вы можете скидывать свои задачи и самые интересные мы обязательно опубликуем в уроке!