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>:

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

Ограничения кроссдоменного разделения ресурсов (CORS).

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

Отсутствие спецификации доступности элементов <audio> и <video> для людей с ограниченными возможностями. Создается спецификация WebSTR, которая должна регламентировать поддержку субтитров формата STR.

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

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

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

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

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

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

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