Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17120 / 1587 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 5:

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

< Лекция 4 || Лекция 5 || Лекция 6 >
Аннотация: Работа с графикой. Основы работы с видео и звуком. Вставка аудио и видеороликов. Ограничения использования тегов <audio> и <video>.

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

Результат:

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

Рис. 4.1. Результат добавления тега <audio> в случае, если браузер не поддерживает указанный тег
 Результат добавления тега <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
< Лекция 4 || Лекция 5 || Лекция 6 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Данил Старцев
Данил Старцев
Россия, Сыктывкар, Школа №38, 2014
Нелли Гарбузова
Нелли Гарбузова