Меню сайта

Форма входа

курс HTML часть 2

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

В спецификации 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> в случае, если браузер не поддерживает указанный тег

Результат добавления тега <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

Лекция 6:

Работа с таблицами и средства навигации

Объединение ячеек таблиц

Зачастую необходимо объединить ряд ячеек таблицы. Теги <td> и <th> содержат два атрибута: <colspan> и <rowspan> для объединения ячеек по горизонтали и вертикали соответственно.

Пример объединения ячеек по горизонтали:

<table border = 1>

    <tr align = center>

      <td colspan=2>Ячейка 1.1</td>

      <td>Ячейка 1.2</td>

    </tr>

    <tr>

      <td>Ячейка 2.1</td>

      <td>Ячейка 2.2</td>

      <td>Ячейка 2.3</td>

    </tr>

   </table>

Результат:

Пример таблицы с объединенными по горизонтали ячейками

Рис. 5.3. Пример таблицы с объединенными по горизонтали ячейками

Схожим образом происходит и объединение по вертикали, нужно помнить только о том, что необходимо удалить лишние теги <td>для строк, ячейки которых будут объединены по вертикали.

Пример:

<table border = 1>

    <tr>

      <td>Ячейка 1.1</td>

      <td rowspan = 2>Ячейка 1+2.2</td>

      <td>Ячейка 1.3</td>

    </tr>

    <tr>

      <td>Ячейка 2.1</td>

      <td>Ячейка 2.3</td>

    </tr>

   </table>

5.4.

Результат:

Пример таблицы с объединенными по вертикали ячейками

Рис. 5.4. Пример таблицы с объединенными по вертикали ячейками

Создание гиперссылок

Редкий сайт состоит лишь из одной веб-страницы, а значит, без грамотной навигации по различным страницам вашего сайта не обойтись. Рассмотрим основы создания гиперссылок.

Гиперссылка, в самом простом случае, создается следующим образом:

<a href="document1.htm"> Ссылка на document1 </a>

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

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

accesskey – позволяет активировать ссылку при помощи комбинации клавиш;
charset – указывает кодировку текста, на который ведет ссылка;
coords – задает координаты активной области ссылки;
href – задает адрес документа, на который необходимо перейти;
hreflang – идентификация языка текста по ссылке;
media – указывает тип носителя, на который ведет ссылка;
name – задает наименование якоря;
rel – задает отношение между ссылаемым и текущим документом;
shape – задает форму активной области ссылки для изображений;
tabindex – задаeт последовательность перехода между ссылками при нажатии кнопки Tab;
target – наименование окна, в которое будет загружаться документ;
title – задает всплывающую подсказку для ссылки;
type – указывает MIME-тип на который ведет ссылка.

Отметим следующий момент: адрес документа на который указывает ссылка может быть как абсолютным (к примеру http://intuit.ru), так и относительным (/document.htm). В последнем случае, путь к документу определяется относительно расположения текущей веб-страницы.

Ссылки не обязательно должны быть только на внешние источники, можно задать так называемые якоря – ссылки на фрагмент текущей веб-страницы. Задается якорь следующим образом:

<a name = "part 1"> </a>

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

<a href="#part 1"> Часть 1 </a>

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

<a href="document.htm#part1"> Часть 1</a>

Графические гиперссылки

Содержимым гиперссылки не обязательно должен быть текст, это может быть в том числе и изображение:

<a href="document1.htm"> <img src="link.gif"> </a>

Изображение, выступающее в качестве гиперссылки будет выделено рамкой, при наведении курсора на такое изображение, он изменит форму.

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

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

Гиперссылка – часть гипертекстового документа, ссылающаяся на другой элемент документа, или внешний объект.

MIME-спецификация кодирования информации, для обеспечения возможности ее передачи через Интернет.

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

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

К счастью, веб значительно шире и глубже, иначе и не было бы необходимости в данном курсе. Если попытаться подвести некую черту под уже изложенным материалом, то можно сказать, что рассмотренными средствами можно создать сайт, относящийся к web 1.0, в котором контент полностью определяется владельцем сайта. О причинах почему на этом останавливаться не стоит уже было упомянуто в самой первой лекции курса.

В рамках следующего блока лекций нами будут рассмотрены каскадные таблицы стилей CSS – веха, уже неотделимая от современной разработки сайтов.