Как оплатить курс? |
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>
Результат:
Видео добавляется аналогичным образом:
<video src="video1.avi"> </video>
- autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы;
- controls – добавляет панель управления к видео;
- height – задает высоту области, для воспроизведения видео.
- loop – воспроизведение аудио повторяется с начала, после его завершения;
- poster – указывает путь к изображению, пока видео не воспроизводится, или недоступно;
- preload – используется для загрузки видеофайла вместе с загрузкой самой страницы, игнорируется, если использован autoplay;
- src – задает путь к файлу для воспроизведения.
- width – задает ширину области, для воспроизведения видео.
Ограничения использования тегов <audio> и <video>
Спецификацией HTML5 не поддерживаются следующие возможности элементов <audio> и <video>:
- Воспроизведение потокового мультимедиа. В настоящий момент есть только приложения, предусматривающие поддержку воспроизведения потоковой мультимедиа.
- Ограничения кроссдоменного разделения ресурсов (CORS).
- Невозможность воспроизведения из сценариев полноэкранного видео, из-за соображений обеспечения безопасности. Как правило, это ограничение компенсируется предоставлениям дополнительных элементов управления браузера.
- Отсутствие спецификации доступности элементов <audio> и <video> для людей с ограниченными возможностями. Создается спецификация WebSTR, которая должна регламентировать поддержку субтитров формата STR.
Ключевые термины и определения
Внедренный элемент веб-страницы – данные, хранящиеся в отдельных от веб-страницы файлах.
Кодеки – алгоритмы, используемые для кодирования и декодирования определенных типов звуковых и видеопотоков, для их воспроизведения.
Потоковая мультимедиа – мультимедиа, непрерывно получаемая от провайдера потокового вещания (к примеру, телевидение).
Краткие итоги
Может показаться, что применение тегов <audio> и <video> в настоящее время не совсем оправдано, из-за наличия существенных ограничений и недостатков. Важно понимать, что значение этих элементов HTML5 будет возрастать со временем, возможно, в первую очередь из-за возрастающего применения мобильных устройств, поскольку только применение этих элементов может обеспечить экономию ресурсов для воспроизведения мультимедиа.
Более детально работа с мультимедиа в рамках HTML5 будет рассмотрена в рамках одного из последующих практических занятий.
Список материалов для самостоятельного изучения
- http://proffy.info/html/22.htm
- http://web.ixit.ru/photoshop/tutorials/web-graph.shtml
- http://www.w3schools.com/tags/tag_img.asp
- http://html5insight.ru/post/8501936976/html5-audio-and-video
- http://html5insight.ru/post/8910847504/how-to-check-if-media-elements-and-codecs-are-supported
- http://bluecode.ru/css/85-html5-video-audio.html
- http://www.w3schools.com/html/html5_audio.asp
- http://www.w3schools.com/html/html5_video.asp