HTML5. Работа с мультимедиа

Вряд ли бы Интернет стал столь популярным, если бы содержал лишь текстовую информацию, пусть и прекрасным образом структурированную и оформленную. Поэтому рассмотрим способы и возможности "оживить" веб-страницу при помощи графики, видео и звука, средствами HTML5.

Работа с графикой

Тег, позволяющий добавить изображение на веб-страницу впервые появился в стандарте HTML 3.2 (от 14 января 1997 года).

Современными веб-браузерами поддерживаются не все существующие графические форматы, поэтому не всякое изображение может быть размещено в рамках веб-страницы.

Различают форматы растровых и векторных изображений. Растровые изображения хранятся в файлах с расширениями jpg, gif, bmp, tiff, png, psd. Векторные – swf, cdr, max, ai.

Из вышеперечисленных форматов хранения графики, в веб-разработке используются JPEG, PNG и GIF для растровой графики и SWF для векторной. Все три формата для растровой графики используют сжатие графической информации.

Добавление графики на веб-страницу

Структура мультимедийной информации принципиально отличается от структуры текстовой, поэтому напрямую мультимедиа не может быть описана в html-коде. Вся необходимая разработчику мультимедиа содержится в отдельных файлах, ссылки на которые, в виде соответствующих тегов прописываются в html-коде.

Для добавления изображения средствами html используется непарный тег <img>, содержащий обязательный атрибут src, указывающий расположение графического файла для отображения.

К числу необязательных атрибутов <img> относятся:

• align – задает тип выравнивания изображения;
• alt – задает текст, отображаемый в случае, если картинка не загрузилась;
• border – определяет толщину рамки вокруг изображения;
• height – задает высоту изображения;
• hspace – задает величину горизонтального отступа от изображения до ближайшего контента;
• ismap – определяет, является ли изображение картой (т.е. к различным частям изображения "привязаны" разные ссылки);
• vspace – задает величину вертикального отступа от изображения до ближайшего контента;
• width – задает ширину изображения;
• usemap – определяет ссылку на <map>, содержащий координаты клиентской карты - изображения.

<img> является встроенным тегом, т.е. он не может использоваться вне блока. Пример:

<p><img src="sample.jpg"></p>

Основы работы с видео и звуком

В спецификации HTML5 предусмотрено два тега для работы с аудио и видео соответственно: <audio> и <video>.

Данные теги являются компонентами собственной среды браузера. Это означает, что не используется никаких сторонних средств для воспроизведения мультимедиа информации, что, во-первых, повышает безопасность, во-вторых, за счет более тесной интеграции, позволяет обходиться меньшим количеством аппаратных ресурсов для воспроизведения мультимедиа, и, в-третьих, позволяет избежать ряда проблем отображения информации (визуальное пересечение с остальным контентом).

Помимо этого, использование <audio> и <video> позволяет организовать управление из веб-сценариев.

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

Частичным решением проблемы кодеков может служить использование элемента <source>, позволяющий объявить несколько источников мультимедиа, из которых браузер выберет наиболее подходящий.

Пример:

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

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

Как уже давно можно было догадаться, для вставки аудиоролика в 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 src="video1.avi"> </video>

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

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

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

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

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

Ключевые термины и определения

Внедренный элемент веб-страницы – данные, хранящиеся в отдельных от веб-страницы файлах.

Кодеки – алгоритмы, используемые для кодирования и декодирования определенных типов звуковых и видеопотоков, для их воспроизведения.

Потоковая мультимедиа – мультимедиа, непрерывно получаемая от провайдера потокового вещания (к примеру, телевидение).

Краткие итоги

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

Более детально работа с мультимедиа в рамках HTML5 будет рассмотрена в рамках одного из последующих практических занятий.

Список материалов для самостоятельного изучения

1. http://proffy.info/html/22.htm
2. http://web.ixit.ru/photoshop/tutorials/web-graph.shtml
3. http://www.w3schools.com/tags/tag_img.asp
4. http://html5insight.ru/post/8501936976/html5-audio-and-video
5. http://html5insight.ru/post/8910847504/how-to-check-if-media-elements-and-codecs-are-supported
6. http://bluecode.ru/css/85-html5-video-audio.html
7. http://www.w3schools.com/html/html5_audio.asp
8. http://www.w3schools.com/html/html5_video.asp