Вставка аудио и видеороликов

Как уже давно можно было догадаться, для вставки аудиоролика в HTML5 используется парный тег <audio>. Текст, помещающийся внутри данного тега будет отображаться в браузерах, не поддерживающих <audio>.

Базовый код для вставки аудио предельно прост:

<audio src="sound1.mp3"> </audio>

Или, для обеспечения универсального воспроизведения различными браузерами:

<audio>

<source src="sound1.ogg">

<source src="sound1.mp3">

</audio>

Тег <audio> содержит следующие атрибуты:

• autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы;
• controls – добавляет панель управления к видео;
• loop – воспроизведение аудио повторяется с начала, после его завершения;
• preload – используется для загрузки файла вместе с загрузкой самой страницы, игнорируется, если использованautoplay;
• src – задает путь к файлу для воспроизведения.

Пример:

<audio autoplay controls src="1.mp3">

Тег <audio> не поддерживается

</audio>

Результат:

Рис. 4.1. Результат добавления тега <audio> в случае, если браузер не поддерживает указанный тег

Рис. 4.2. Результат добавления тега <audio> в случае, если тег поддерживается

Видео добавляется аналогичным образом:

Атрибуты тега <video>:

• autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы;
• controls – добавляет панель управления к видео;
• height – задает высоту области, для воспроизведения видео.
• loop – воспроизведение аудио повторяется с начала, после его завершения;
• poster – указывает путь к изображению, пока видео не воспроизводится, или недоступно;
• preload – используется для загрузки аудиофайла вместе с загрузкой самой страницы, игнорируется, если использован autoplay;
• src – задает путь к файлу для воспроизведения.
• width – задает ширину области, для воспроизведения видео.

Ограничения использования тегов <audio> и <video>

Спецификацией HTML5 не поддерживаются следующие возможности элементов <audio> и <video>:

1. Воспроизведение потокового мультимедиа. В настоящий момент есть только положения, предусматривающие поддержку воспроизведения потоковой мультимедиа.
2. Ограничения кроссдоменного разделения ресурсов (CORS).
3. Невозможность воспроизведения из сценариев полноэкранного видео, из-за соображений обеспечения безопасности. Как правило, это ограничение компенсируется предоставлениям дополнительных элементов управления браузера.
4. Отсутствие спецификации доступности элементов <audio> и <video> для людей с ограниченными возможностями. Создается спецификация WebSTR, которая должна регламентировать поддержку субтитров формата STR.